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 = falsesetTimeout(() => {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 somethingthat.logs('确认')}).catch(() => {//取消// do somethingthat.logs('取消')})},logs(type) {console.log('调用组件的' + type);}}
}</script>
<!-- <style scoped>
</style> -->

vue结合el-dialog 封装自己的confirm二次确认弹窗相关推荐

vue二次确认弹窗组件
1.二次确认弹窗组件reconfirm.vue <template><el-dialog :visible="dialogFlag" @close="c ...
封装一个全局使用的二次确认弹窗
背景: 如图所示,在项目中进行删除.取消.停用等等操作的时候,出于考虑误操作等,我们通常会需要用户进行二次确认,然后再进行操作.对于这种使用比较多的公共功能,我们如何才能保持一致并且简单的使用呢?出于 ...
Vue之Axios AJAX封装
来源:我的博客站 OceanicKang |<Vue 之 Axios AJAX封装> 前言才不要写前言,Axios 中文文档 https://www.kancloud.cn/yunye/ ...
axios 超时_聊聊 Vue 中 axios 的封装
axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 作为一 ...
常见的 vue elementUI el的标签总结
vue elementUI el的标签总结标签源码标签作用 el-col 整体 el-container 主体区域 el-tooltip 提示框信息 el-header 内容头部区域 el-asi ...
VUE中简单封装二次确认组件
如何快速封装简单二次确认组件? 一.首先在src文件夹内的components文件中创建一个secn-conf.vue 二 .在secn-conf.vue页面中将弹出层.提示消息等样式写好三 .在p ...
VUE的el和data的写法以及MVVM模型、VUE的数据代理
第一.VUE的el和data的两种写法: el的两种写法如下: 第一个形式如下: const v = new Vue({//第一种el的写法el:'#demo',data: {name: '三清祖师' ...
vue 简介 el 挂载点 data 数据
目录标题 vue简介 vue案例 el 挂载点 data 数据 vue简介 vue案例 <div id="app">{{ message }}</div>& ...
vue组件封装技巧，如何对vue模块进行功能封装
如何对vue模块进行功能封装,vue组件封装技巧当业务不断累加,导致原本干净整洁的代码越来越冗余,各种变量和注释已经让他人望而却步,往往又苦于重构带来的成本,导致诞生很多巨石应用.与其让自己或他人面 ...

vue结合el-dialog 封装自己的confirm二次确认弹窗

vue结合el-dialog 封装自己的confirm二次确认弹窗相关推荐

最新文章

热门文章