vue结合el-dialog封装自己的confirm二次确认弹窗方式
作者:唐十八_wei
这篇文章主要介绍了vue结合el-dialog封装自己的confirm二次确认弹窗方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue结合el-dialog封装自己的confirm二次确认弹窗
这里使用el-dialog 主要是用他的关闭动画,让关闭更加丝滑
首先在components 添加 ConfirmAlert文件夹 然后添加vue和js 文件
index.js
import Vue from 'vue'; import confirm from './index.vue' let confirmConstructor = Vue.extend(confirm); let theConfirm = function (content) { return new Promise((res, rej) => { //返回promise,ok执行resolve,调用时使用.then继续,no执行reject调用时使用catch捕捉 let confirmDom = new confirmConstructor({ el: document.createElement('div') }) const elDiv = document.body.appendChild(confirmDom.$el); //new一个对象,然后插入body里面 confirmDom.content = content; //为了使confirm的扩展性更强,这个采用对象的方式传入,所有的字段都可以根据需求自定义 confirmDom.ok = function () { res() close() } confirmDom.close = function () { rej() close() } function close() { confirmDom.dialogVisible = false setTimeout(() => { console.log('remove'); elDiv.remove() }, 1000); } }) } export default theConfirm;
index.vue
<template> <div class="confirm-container"> <el-dialog :title="content.type" :before-close="close" :visible.sync="dialogVisible" width="30%"> <div class="confirm-content"> <p class="msgContent">{{ content.msg }} </p> <div class="foot" slot="footer"> <el-button type="primary" @click.stop="close"> <span>{{ content.btn.no || '确认' }}</span> </el-button> <el-button type="primary" @click.stop="ok"> <span>{{ content.btn.ok || '取消' }}</span> </el-button> </div> </div> </el-dialog> </div> </template> <script> export default { data() { return { content: { type: '提示', msg: '', btn: { ok: '确定', no: '取消' }, }, dialogVisible: true } }, methods: { close() { console.log('关闭'); }, ok() { console.log('确定') } } } </script> <style scoped> .msgContent { text-align: center; } .foot { width: 100%; display: flex; justify-content: center; margin-top: 32px; } </style>
main.js将alertConfirm挂载vue上
import alertConfirm from '@/components/confirmAlert' Vue.prototype.$alertConfirm = alertConfirm;
组件中使用
<!-- --> <template> <div> <el-button @click="btn">log</el-button> </div> </template> <script> export default { data() { return { }; }, watch: {}, components: {}, computed: {}, created() { }, mounted() { }, methods: { btn() { let that = this // 存储this指向 this.$alertConfirm({ type: '提示', msg: '是否删除这条信息?', btn: { ok: '确定', no: '取消' }, //msgDetail: '' }).then(() => { // 确认 // do something that.logs('确认') }).catch(() => { //取消 // do something that.logs('取消') }) }, logs(type) { console.log('调用组件的' + type); } } } </script> <!-- <style scoped> </style> -->
vue二次确认弹窗组件
1.二次确认弹窗组件reconfirm.vue
<template> <el-dialog :visible="dialogFlag" @close="closeDialog()" width="420px" class="myz-info-reconfirm"> <div slot="title" class="title-reconfirm"> <span>{{title}}</span> <span class="warn-red" v-if="deleteAdmin">({{redWarnMessage}})</span> </div> <div class="body_message"> <span class="warn-img"></span> {{warnMessage}} </div> <span slot="footer" class="clearfix"> <span class="check-exact" v-if="deleteAdmin"> <el-checkbox v-model="checked">我已了解</el-checkbox> </span> <span class="check-btn"> <el-button type="primary" :disabled="!checked && deleteAdmin" @click="exact()">确定</el-button> <el-button @click="closeDialog">取消</el-button> </span> </span> </el-dialog> </template> <script> import { mapState, mapActions } from 'vuex' import eventBus from '@/components/busTag' // 引入公共的bus,来做为中间传达的工具 export default { props: { title: { type: String, default: '提示' }, warnMessage: { type: String }, redWarnMessage: { type: String, default: '' }, deleteInfo: { // 删除信息 type: Object, default: () => {} } }, components: { }, data () { return { deleteAdmin: false, dialogFlag: false, checked: false } }, computed: { ...mapState(['reConfirm']) }, watch: { reConfirm (newVal) { this.dialogFlag = newVal } }, created () { }, mounted () { //删除后初始化条件 eventBus.$on('deleteHandleSuccess', () => { this.checked = false this.deleteAdmin = false }) }, methods: { ...mapActions(['updateReconfirm']), closeDialog: function () { this.checked = false this.deleteAdmin = false this.updateReconfirm(false) }, exact () { if (this.deleteInfo.adminUser && this.checked === false) { this.deleteAdmin = true } else { this.$emit('deleteHandle') } } } } </script> <style lang="scss" scoped> .title-reconfirm{ font-size: 18px; } .check-exact{ float: left; } .check-btn{ float: right; } .warn-red{ font-size: 12px; color:red; } .body_message{ padding-bottom: 30px; padding-left: 10px; } .warn-img{ padding-right: 30px; display: inline-block; width: 25px; height:25px; background: url("/static/icon/common-icon/warning.png") no-repeat; border: none; background-size: 25px 25px; vertical-align: middle; } </style> <style lang="scss"> .el-checkbox__inner{ border: 1px solid #909399; } .myz-info-reconfirm div.el-dialog__footer{ border:none; text-align: right; height: 50px; padding: 6px 0; } .myz-info-reconfirm div.el-dialog__header{ border:none; padding: 6px 0; } .myz-info-reconfirm div.el-dialog__body{ padding: 20px; } .myz-info-reconfirm div.el-dialog{ margin-top: 35vh !important; } /*清除浮动-start*/ .clearfix { *zoom: 1; } .clearfix:before,.clearfix:after { display: block; overflow: hidden; clear: both; height: 0; visibility: hidden; content: "."; } /*清除浮动-end*/ </style>
2.引用二次弹窗组件
<template> <div> <reconfirm @deleteHandle="deleteHandle" :warnMessage="'确定删除提示'" :deleteInfo="deleteLabelInfo" :redWarnMessage="'二次提示信息'"></reconfirm> </div> </template> <script> import { mapActions } from 'vuex' import Reconfirm from '@/components/Reconfirm' export default { components: { Reconfirm }, data () { return { deleteLabelInfo: {} } }, watch: { }, mounted () { }, computed: { }, methods: { ...mapActions(['updateReconfirm']), deleteHandle () { //处理删除逻辑 }, deleteAppLabel () { //显示二次提示条件adminUser this.deleteLabelInfo.adminUser = (this.TeamLabelTeams.length > 0) //显示二次提示弹窗 this.updateReconfirm(true) } } } </script> <style lang="scss" scoped> </style>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。