vue中自定义弹框show-modal
使用方式
在template中引入
<show-modal></show-modal>
在需要使用show-modal的地方使用
this.$showModal({
title: '',
content: '确认重置,重置将删除所有数据',
cancelColor:"#4B557B",
cancelBackgroundColor:"#EFF2FF",
cancelText:"取消",
confirmColor:"#FFFFFF",
confirmBackgroundColor:"#4B557B",
confirmText:"确认",
success:(res)=>{
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
在main.js中挂在组件
import initModal from "@/components/show-modal/initModal.js"
import showModal from "@/components/show-modal/show-modal.vue"
initModal(Vue)
Vue.component('show-modal',showModal);
文件代码:组件show-modal
show-modal/show-modal.vue
<template>
<div class="_showModal" v-show="show">
<div class="_shade"></div>
<div class="_modalBox">
<div class="_modal">
<slot name="title">
<div class="title" v-show="title">{{title}}</div>
</slot>
<slot name="content">
<div class="content">{{content}}</div>
</slot>
<slot name="btn">
<div class="btnbox">
<div class="btn" :style="{color:cancelColor,background:cancelBackgroundColor}" @click.stop="clickBtn('cancel')">{{cancelText}}</div>
<div class="btn" :style="{color:confirmColor,background:confirmBackgroundColor}" @click.stop="clickBtn('confirm')">{{confirmText}}</div>
</div>
</slot>
</div>
</div>
</div>
</template>
<script>
export default {
name:"show-modal",
computed: {
show(){
return this.$modalStore.state.show;
},
title(){
return this.$modalStore.state.title;
},
content(){
return this.$modalStore.state.content;
},
showCancel(){
return this.$modalStore.state.showCancel;
},
cancelText(){
return this.$modalStore.state.cancelText;
},
cancelColor(){
return this.$modalStore.state.cancelColor;
},
cancelBackgroundColor(){
return this.$modalStore.state.cancelBackgroundColor;
},
confirmText(){
return this.$modalStore.state.confirmText;
},
confirmColor(){
return this.$modalStore.state.confirmColor;
},
confirmBackgroundColor(){
return this.$modalStore.state.confirmBackgroundColor;
}
},
methods:{
closeModal(){
this.$modalStore.commit('hideModal')
},
clickBtn(res){
this.$modalStore.commit('hideModal')
this.$modalStore.commit('success',res)
}
},
beforeDestroy(){
this.$modalStore.commit('hideModal')
},
data() {
return {
};
}
}
</script>
<style lang="scss" scoped>
._showModal{
position: fixed;
top: 0;
left:0;
width: 100%;
height: 100%;
z-index:10000;
._shade{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #000;
opacity: .6;
z-index:11000;
}
._modalBox{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index:12000;
display: flex;
justify-content: center;
align-items: center;
._modal{
flex: none;
width:250px;
min-height:170px;
background: #fff;
border-radius: 16px;
.title{
text-align: center;
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: bold;
color: #333333;
margin-top: 20px;
}
.content{
min-height: 80px;
width: 86%;
margin:20px auto;
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #333333;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.btnbox{
display: flex;
width: 88%;
margin: auto;
margin-bottom: 20px;
flex-direction: row;
justify-content: space-between;
.btn{
width: 100px;
height: 32px;
border-radius: 16px;
display: flex;
justify-content: center;
align-items: center;
font-family: Source Han Sans CN;
font-weight: 400;
}
}
}
}
}
</style>
show-modal/initModal.js
import Vuex from 'vuex'
export default function initModal(v) {
// 挂在store到全局Vue原型上
v.prototype.$modalStore = new Vuex.Store({
state: {
show:false,
title:"标题",
content:'内容',
showCancel:true,
cancelText:"取消",
cancelColor:"#ED4F4E",
cancelBackgroundColor:"#FFE5E5",
confirmText:"确定",
confirmColor:"#FFFEFA",
confirmBackgroundColor:"linear-gradient(0deg, #F65555 0%, #E54848 100%)",
success:null,
},
mutations: {
hideModal(state) {
state.show = false
},
showModal(state,data) {
state = Object.assign(state,data)
state.show = true
},
success(state,res) {
let cb = state.success
let resObj={
cancel:false,
confirm:false
}
res=="confirm"?resObj.confirm=true:resObj.cancel=true
cb && cb(resObj)
}
}
})
// 注册$showModal到Vue原型上,以方便全局调用
v.prototype.$showModal = function (option) {
if (typeof option === 'object') {
v.prototype.$modalStore.commit('showModal', option)
}else{
throw "配置项必须为对象传入的值为:"+typeof option;
}
}
}