Uni-app全局弹框提示插件
Uni-app全局弹框提示插件
由于uni-app端不支持dom操作，像下面这种方式在app端就无法实现
https://www.cnblogs.com/Plume-blogs/p/16348462.html
Uni-app端实现全局弹框插件
1.创建initPrompt.js文件（名称可以自定义，不过后面对应位置的名称要注意换过来）
代码如下：
import Vuex from 'vuex'
export default function initPrompt(v) {
// 挂在store到全局Vue原型上
v.prototype.$promptStore = new Vuex.Store({
state: {
show: true,
icon: "success", //success:成功；fail:失败
title: "标题",
desc: '内容',
duration: 3000,
btnCancelTit: '',
btnOkTit: '确定',
success: null,
},
mutations: {
hidePrompt(state) {
// 小程序导航条页面控制
// #ifndef H5
if (state.hideTabBar) {
wx.showTabBar();
}
// #endif
state.show = false
},
showPrompt(state, data) {
state = Object.assign(state, data)
state.show = true
console.log('------state====', state);
setTimeout(() => {
state.show = false
}, state.duration)
},
success(state, data) {
return state.success(state.icon)
}
}
})
// 注册$showPrompt到Vue原型上，以方便全局调用
v.prototype.$showPrompt = function(option) {
if (typeof option === 'object') {
// #ifndef H5
if (option.hideTabBar) {
wx.hideTabBar();
}
// #endif
v.prototype.$promptStore.commit('showPrompt', option)
} else {
throw "配置项必须为对象传入的值为：" + typeof option;
}
}
}
二、创建showPrompt.vue 文件
<template>
<view class="promptBox" v-show="show">
<view class="prompt">
<image v-show="icon=='success'" class="promptRipple" src="@/static/icon/ripple_succ.png" mode=""></image>
<image v-show="icon=='warn'" class="promptRipple" src="@/static/icon/ripple_warn.png" mode=""></image>
<image v-show="icon=='error'" class="promptRipple" src="@/static/icon/ripple_err.png" mode=""></image>
<!-- <image v-else class="promptRipple" src="@/static/icon/ripple_warn.png" mode=""></image> -->
<image v-show="icon=='success'" class="promptIcon" src="@/static/icon/p_succ.png" mode=""></image>
<image v-show="icon=='warn'" class="promptIcon" src="@/static/icon/p_warn.png" mode=""></image>
<image v-show="icon=='error'" class="promptIcon" src="@/static/icon/p_err.png" mode=""></image>
<!-- <image v-else class="promptIcon" src="@/static/icon/p_warn.png" mode=""></image> -->
<view class="promptTit">
{{title}}
</view>
<view class="promptDesc" v-html="desc">
</view>
<view class="pBtnBox">
<button v-show="btnCancelTit" class="pBtnCancel" @click="onCancel">{{btnCancelTit}}</button>
<button class="pBtnOk" @click="onOk('hahahhaah')">{{btnOkTit || '确定'}}</button>
</view>
</view>
</view>
</template>
<script>
export default {
name: "show-prompt",
data() {
return {
};
},
computed: {
show() {
return this.$promptStore.state.show;
},
title() {
return this.$promptStore.state.title;
},
desc() {
return this.$promptStore.state.desc;
},
icon() {
return this.$promptStore.state.icon;
},
btnCancelTit() {
return this.$promptStore.state.btnCancelTit
},
btnOkTit() {
return this.$promptStore.state.btnOkTit
},
/* iconUrl() {
var icon = this.$promptStore.state.icon
var iconUrl = ''
if(icon == 'success') {
iconUrl = '@/static/icon/p_succ.png'
}else if(icon == 'warn') {
iconUrl = '@/static/icon/p_warn.png'
}else if(icon == 'error') {
iconUrl = '@/static/icon/p_err.png'
}else {
iconUrl = '@/static/icon/p_warn.png'
}
return iconUrl
},
rippleUrl() {
var rippleUrl = ''
if(this.icon == 'success') {
rippleUrl = '@/static/icon/ripple_succ.png'
}else if(this.icon == 'warn') {
rippleUrl = '@/static/icon/ripple_warn.png'
}else if(this.icon == 'error') {
rippleUrl = '@/static/icon/ripple_err.png'
}else {
rippleUrl = '@/static/icon/ripple_warn.png'
}
return rippleUrl
} */
},
mounted() {
/* setTimeout(() => {
this.$promptStore.commit('hidePrompt')
this.$promptStore.commit('success', "confirm")
}, 3000) */
},
methods: {
onCancel() {
this.$promptStore.commit('hidePrompt')
},
onOk(res) {
this.$promptStore.commit('hidePrompt')
// this.$promptStore.commit('success', res)
this.$promptStore.commit('success')
}
},
beforeDestroy() {
this.$promptStore.commit('hidePrompt')
},
}
</script>
<style lang="scss" scoped>
.promptBox {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4);
z-index: 9999;
.prompt {
position: fixed;
width: 300px;
height: 234px;
border-radius: 16px;
background: linear-gradient(180deg, #e3eeff 0%, #ffffff 100%);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 100;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
.promptRipple {
position: absolute;
top: 0;
// width: 210px;
// height: 102px;
width: 300px;
height: 230px;
z-index: -1;
}
.promptIcon {
position: absolute;
top: 0;
transform: translateY(-50%);
width: 110px;
height: 110px;
border-radius: 90px;
overflow: hidden;
// background: linear-gradient(149.98deg, rgba(132, 181, 255, 1) 5.7%, rgba(33, 119, 250, 1) 90.23%);
// box-shadow: 0px 4px 10px rgba(18, 103, 232, 0.4);
}
.promptTit {
width: 80%;
font-size: 20px;
font-family: PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 1);
text-align: center;
margin-top: 66px;
}
.promptDesc {
height: 40px;
margin-top: 12px;
color: rgba(102, 102, 102, 1);
font-family: PingFang SC;
font-size: 14px;
text-align: center;
}
.pBtnBox {
width: 280px;
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 12px;
.pBtnOk {
width: 120px;
height: 44px;
line-height: 44px;
border-radius: 8px !important;
background: linear-gradient(301.23deg, rgba(71, 143, 253, 1) 0%, rgba(18, 103, 232, 1) 102.96%);
border: none;
color: #ffffff;
font-weight: 500;
font-size: 15px;
}
.pBtnCancel {
width: 120px;
height: 44px;
line-height: 44px;
border-radius: 8px;
background: rgba(224, 237, 255, 1);
color: rgba(18, 103, 232, 1);
font-weight: 500;
font-size: 15px;
}
}
}
}
button::after {
border: none;
}
</style>
三、在main.js文件中引入
/* 引入全局弹框组件 */
import initPrompt from "@/pages/plugin/initPrompt.js"
initPrompt(Vue);
import showPrompt from "@/pages/plugin/showPrompt.vue"
Vue.component('show-prompt',showPrompt);
四、调用
this.$showPrompt({
icon: "warn",
title: "温馨提示",
desc: '通过扣手持终端扳机读取RFID</br>请先扫RFID才能绑定',
duration: 5000,
btnOkTit: '确定',
btnCancelTit: '取消',
success: res => {
console.log('-------hahahahah---test===', res)
}
});
