vue結(jié)合el-dialog封裝自己的confirm二次確認(rèn)彈窗方式

更新時(shí)間：2023年08月21日 14:37:58 作者：唐十八_wei

這篇文章主要介紹了vue結(jié)合el-dialog封裝自己的confirm二次確認(rèn)彈窗方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue結(jié)合el-dialog封裝自己的confirm二次確認(rèn)彈窗

這里使用el-dialog 主要是用他的關(guān)閉動(dòng)畫，讓關(guān)閉更加絲滑

首先在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執(zhí)行resolve,調(diào)用時(shí)使用.then繼續(xù)，no執(zhí)行reject調(diào)用時(shí)使用catch捕捉
        let confirmDom = new confirmConstructor({
            el: document.createElement('div')
        })
        const elDiv = document.body.appendChild(confirmDom.$el); //new一個(gè)對(duì)象，然后插入body里面
        confirmDom.content = content; //為了使confirm的擴(kuò)展性更強(qiáng)，這個(gè)采用對(duì)象的方式傳入，所有的字段都可以根據(jù)需求自定義
        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 || '確認(rèn)' }}</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('關(guān)閉');
        },
        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 // 存儲(chǔ)this指向
            this.$alertConfirm({
                type: '提示',
                msg: '是否刪除這條信息？',
                btn: {
                    ok: '確定', no: '取消'
                },
                //msgDetail: ''
            }).then(() => {
                // 確認(rèn)
                // do something
                that.logs('確認(rèn)')
            }).catch(() => {
                //取消
                // do something
                that.logs('取消')
            })
        },
        logs(type) {
            console.log('調(diào)用組件的' + type);
        }
    }
}
</script>
<!-- <style scoped>
</style> -->

vue二次確認(rèn)彈窗組件

1.二次確認(rèn)彈窗組件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，來做為中間傳達(dá)的工具
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;
  }
/*清除浮動(dòng)-start*/
.clearfix {
  *zoom: 1;
}
.clearfix:before,.clearfix:after {
  display: block;
  overflow: hidden;
  clear: both;
  height: 0;
  visibility: hidden;
  content: ".";
}
/*清除浮動(dòng)-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>