在使用iview的this.$Modal.confirm提示组件时，很难去修改默认的组件样式，如果自己能定义一个全局的提示组件，那在修改样式以及自定义提示组件、使用i18n多语言方面都会很方便
提示组件：
在components上自定义一个组件
<template>
<transition-group name='fade'>
<!-- 退出弹窗 -->
<div class="quit_dialog" key="1" v-if="isQuit" @touchmove.prevent></div>
<div class="quit_box" v-show="isQuit" key="2">
<div class="topBox">
<img src="@/assets/main/tip.png">
<span class="tip">提示</span>
</div>
<div class="quit_title">确认执行该操作吗？</div>
<button class="cancel_btn" @click="leftClick">取消</button>
<button class="confirm_btn" @click="rightClick">确认</button>
</div>
</transition-group>
</template>
<script>
export default {
name: 'Popup',
data() {
return {
isQuit: false,
imgUrl: '',
title: '',
content: '',
btnText: '',
rightText: ''
}
},
methods: {
leftClick() {
this.leftBtn()
this.isQuit = false
},
rightClick() {
this.rightBtn()
this.isQuit = false
}
}
}
</script>
<style lang="less">
// 退出弹窗
.fade-enter,
.fade-leave-active {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.35s;
}
// 全局弹窗
.quit_dialog {
background: rgba(0,0,0,.5);
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10000;
}
.quit_box {
width: 460px;
background:rgba(0,58,184,0.8);
position: fixed;
top: 50%;
left: 50%;
margin-left: -230px;
margin-top: -190px;
z-index: 10001;
border-radius: 10px;
text-align: center;
padding: 40px 30px;
.topBox{
display: flex;
align-items: center;
img{
width: 24px;
}
.tip{
margin-left:10px;
font-size: 16px;
color:#fff;
}
}
.quit_title{
color: #fff;
font-size: 16px;
margin: 10px 0px 30px 0;
}
button {
padding:4px 0px;
font-size: 16px;
border-radius: 4px;
width: 60px;
text-align: center;
cursor: pointer;
}
.cancel_btn{
color: #fff;
border: 1px solid #fff;
margin-right: 32px;
background:rgba(158,167,180,0.3);
}
.confirm_btn {
box-shadow: 0px 3px 4px 0px rgba(1, 84, 58, 0.27);
border: 1px solid #0765F3;
background-color: rgba(0,58,184,0.8);
color:#11B8FE;
}
}
</style>
添加一个js文件，用于写调用该组件的代码：confirm.js
import Vue from 'vue'
import conforms from '@/components/confirmMessage'
const PopupBox = Vue.extend(conforms)
conforms.install = function(data) {
console.log("shuju ", data)
let instance = new PopupBox({
data
}).$mount()
document.body.appendChild(instance.$el)
Vue.nextTick(() => {
instance.isQuit = true
// isQuit 和弹窗组件里的isQuit对应，用于控制显隐
})
}
export default conforms在main.js中引用该方法，并且保存在vue的原型上，使之可以随地调用
// 引入自定义的confirm弹窗组件
import conforms from './utils/confirm'
Vue.prototype.$conforms = conforms.install在页面中使用：
// 批量删除
deleteHandle() {
if (this.selectIds.length > 0) {
this.$conforms({
// imgUrl: require('@/assets/main/tip.png'), // 顶部图片.
// imgLoadTip: '图片加载中...',
// title: '确认提交吗？',
// btnText: '取消',
// rightText: '确认',
// 右边点击事件
rightBtn: () => {
const para = this.selectIds
deleteGatewayInfo(para).then(res => {
this.$Message.success(res.msg)
this.getGatewayInfoData()
})
},
// 左边点击取消事件
leftBtn: () => {}
})
} else {
this.$Message.info('请选择删除数据')
}
},上图中可以定义图片，组件里面的内容，这样可以实现每个地方调用的都是不一样的内容，我暂时是在组件中写成一样的。
