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') });
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
- Ant Design Vue全局对话确认框(confirm)的回调不触发
- Vue给 elementUI 中的 this.$confirm、this.$alert、 this.$prompt添加按钮加载效果
- vue element插件this.$confirm用法及说明(取消也可以发请求)
- Vue ElementUI this.$confirm async await封装方式
- vue+el使用this.$confirm,不能阻断代码往下执行的解决
相关文章
Vue3中的shallowRef 和shallowReactive对比分析
这篇文章主要介绍了Vue3中的shallowRef 和shallowReactive,通过示例代码逐一对他们的使用做的详细介绍,文末补充介绍了vue3的shallowRef()、shallowReactive()和shallowReadonly()的使用,需要的朋友可以参考下2023-01-01浅谈Vue.js应用的四种AJAX请求数据模式
本篇文章主要介绍了浅谈Vue.js应用的四种AJAX请求数据模式,本文将详细介绍在Vue应用程序中实现AJAX的四个方法,有兴趣的可以了解一下2017-08-08vue+elementui 实现新增和修改共用一个弹框的完整代码
Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是Mint UI ,今天给大家普及vue+elementui 实现新增和修改共用一个弹框的完整代码,一起看看吧2021-06-06vue组件中使用props传递数据的实例详解
这篇文章主要介绍了vue组件中使用props传递数据的实例详解,非常不错,具有参考借鉴价值,需要的朋友可以参考下2018-04-04详解vue-cli3多环境打包配置
这篇文章主要介绍了vue-cli3多环境打包配置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-03-03Vue自动化注册全局组件脚本分享
这篇文章主要介绍了Vue自动化注册全局组件脚本,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-03-03npm run dev失败的简单解决办法
最近工作中遇到了npm run dev报错这个问题,通过查找相关资料最终解决了,所以下面这篇文章主要给大家介绍了关于npm run dev失败的详细解决办法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07Vue分页器实现原理详解
这篇文章主要为大家详细介绍了Vue分页器实现原理,编写了分页器组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2019-06-06elementui的el-popover修改样式不生效的解决
在使用element-ui的时候,有一个常用的组件,那就是el-popover,本文就介绍一下elementui的el-popover修改样式不生效的解决方法,感兴趣的可以了解一下2021-06-06基于Vue3实现旋转木马动画效果
这篇文章主要为大家介绍了如何利用Vue3实现旋转木马的动画效果,文中的示例代码讲解详细,对我们学习Vue有一定的帮助,需要的可以参考一下2022-05-05
最新评论