vue中关于confirm确认框的用法
作者：王佑辉
这篇文章主要介绍了vue中关于confirm确认框的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue中confirm确认框用法
示例图片
示例代码
this.$confirm("是否确认该操作","提示",{
iconClass: "el-icon-question",//自定义图标样式
confirmButtonText: "确认",//确认按钮文字更换
cancelButtonText: "取消",//取消按钮文字更换
showClose: true,//是否显示右上角关闭按钮
type: "warning",//提示类型 success/info/warning/error
}).then(()=>{
//确认操作
}).then((data) => {
//取消操作
}).catch((err) => {
//捕获异常
console.log(err);
});vue自定义$confirm弹窗确认组件
1.Vue.extend()
使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象
.vue单文件经过webpack打包之后是一个组件示例对象，因此可以传到Vue.extend中生成一个包含此组件的类
2.new VueComponent().$mount()
new VueComponent() 创建实例，调用$mount()可以手动编译
如果.$mount(’#app’)有参数，表示手动编译并且挂载到该元素上。
3.$el属性 类型：string | HTMLElement
手动编译后的示例对象中存在一个$el对象（dom元素），可以作为模板被插入到页面中。
4.Vue.prototype 添加 Vue 实例方法
源码
- vue文件
<template>
<div :class="{'pop-up':true,'show':show}">
<div class="popup-mask" v-if="hasMark"></div>
<transition name="bottom">
<div class="popup-note bottom">
<div class="pop-content">
<div class="pop-tit">
{{title}}
</div>
<p class="pop-note hasTitle">
<span class="msg" v-html="msg"></span>
</p>
<div class="btn-wrapper" v-if="type == 'alert'" @click.stop="alertClick">
<span class="btn btn-block yes-btn">{{alertBtnText}}</span>
</div>
<div class="btn-wrapper" v-if="type == 'confirm'">
<span @touchstart.prevent="noClick" class="btn">{{noBtnText}}</span>
<span @touchstart.prevent="yesClick" class="btn yes-btn">{{yesBtnText}}
</span>
</div>
</div>
</div>
</transition>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: '提示'
},
msg: {
type: String,
default: ''
},
type: {
type: String,
default: 'alert'
},
alertBtnText: {
type: String,
default: '我知道了'
},
yesBtnText: {
type: String,
default: '确定'
},
noBtnText: {
type: String,
default: '取消'
},
hasMark: {
type: Boolean,
default: true
}
},
data() {
return {
promiseStatus: null,
show: false
}
},
methods: {
confirm() {
let _this = this;
this.show = true;
return new Promise(function (resolve, reject) {
_this.promiseStatus = {resolve, reject};
});
},
noClick() {
this.show = false;
this.promiseStatus && this.promiseStatus.reject();
},
yesClick() {
this.show = false;
this.promiseStatus && this.promiseStatus.resolve();
},
alertClick() {
this.show = false;
this.promiseStatus && this.promiseStatus.resolve();
}
}
}
</script>
<style lang='less'>
@import "../../../static/less/components/tip/index.less";
</style>- confirm.js
import Vue from 'vue'
import message from './message.vue'
const VueComponent = Vue.extend(message);
const vm = new VueComponent().$mount();
let init = false;
let defaultOptions = {
yesBtnText: '确定',
noBtnText: '取消'
};
const confirm = function (options) {
Object.assign(vm,defaultOptions , options,{
type:'confirm'
});
if (!init) {
document.body.appendChild(vm.$el);
init = true;
}
return vm.confirm();
};
export default confirm;- 全局注册
import confirm from './views/components/message/confirm' Vue.prototype.$confirm = confirm;
- 使用
this.$confirm({
title: '',
msg: '模式未保存，确定离开？',
yesBtnText: "离开"
}).then(() => {
console.log('yes')
})
.catch(() => {
console.log('cancel')
});总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。