vue3 -- 自己封装弹框组件 -- 支持 Promise API
背景
在列表累的页面中最常见的就是增删改查,其中删除需要慎重操作,因为数据一旦删除就是永久性的不可逆的,所以在执行此类操作的时候,都会使用弹框进行二次确认,真的确定删除在执行删除操作,增强用户体验
下面我们就自己封装弹层组件,通过vue实例调用$confirm函数弹出确认框。
import导入函数使用也需要支持。
组件落地代码
基本布局与相关数据填充
<template>
<div class="my-confirm" :class="{ fade: fade }">
<div class="wrapper">
<div class="header">
<h3>{{ title }}</h3>
<a @click="cancelCallback()" href="JavaScript:;" class="iconfont icon-close-new"></a>
</div>
<div class="body">
<i class="iconfont icon-warning"></i>
<span>{{ text }}</span>
</div>
<div class="footer">
<MyButton @click="cancelCallback()" size="mini" type="gray">取消</MyButton>
<MyButton @click="submitCallback()" size="mini" type="primary">确认</MyButton>
</div>
</div>
</div>
</template>
<script>
// 当前组件不是在APP下进行渲染,无法使用APP下的环境(全局组件,全局指令,原型属性函数)
import MyButton from '@/components/library/my-button'
import { onMounted, ref } from 'vue'
export default {
name: 'MyConfirm',
components: { MyButton },
props: {
title: {
type: String,
default: '温馨提示'
},
text: {
type: String,
default: ''
},
submitCallback: {
type: Function
},
cancelCallback: {
type: Function
}
},
setup() {
const fade = ref(false)
onMounted(() => {
// 当元素渲染完毕立即过渡的动画不会触发
setTimeout(() => {
fade.value = true
}, 0)
})
return { fade }
}
}
</script>
<style scoped lang="less">
.my-confirm {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 8888;
background: rgba(0, 0, 0, 0);
&.fade {
transition: all 0.4s;
background: rgba(0, 0, 0, 0.5);
}
.wrapper {
width: 400px;
background: #fff;
border-radius: 4px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -60%);
opacity: 1;
&.fade {
transition: all 0.4s;
transform: translate(-50%, -50%);
opacity: 1;
}
.header,
.footer {
height: 50px;
line-height: 50px;
padding: 0 20px;
}
.body {
padding: 20px 40px;
font-size: 16px;
.icon-warning {
color: @priceColor;
margin-right: 3px;
font-size: 16px;
}
}
.footer {
text-align: right;
.xtx-button {
margin-left: 20px;
}
}
.header {
position: relative;
h3 {
font-weight: normal;
font-size: 18px;
}
a {
position: absolute;
right: 15px;
top: 15px;
font-size: 20px;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
color: #999;
&:hover {
color: #666;
}
}
}
}
}
</style>
创建 Confirm.js
在定义全局组件 components 文件放置全局组件的文件夹下面定义一个 Confirm.js 文件
import { createVNode, render } from 'vue'
import MyConfirm from './my-confirm.vue'
const div = document.createElement('div')
div.setAttribute('class', 'my-confirm')
document.body.appendChild(div)
export default ({ title, text }) => {
return new Promise((resolve, reject) => {
// 点击确定按钮
const submitCallback = () => {
render(null, div)
resolve()
}
// 点击取消按钮
const cancelCallback = () => {
render(null, div)
reject(new Error('点击取消'))
}
// 1. 渲染组件
// 2. 点击确认按钮,触发resolve同时销毁组件
// 3. 点击取消按钮,触发reject同时销毁组件
const vnode = createVNode(MyConfirm, { title, text, submitCallback, cancelCallback })
render(vnode, div)
})
}
使用
-
直接使用
Confirm
方法// 导入 import Confirm from '@/components/library/Confirm' export default { setup() { const deleteCart = skuId => { Confirm({ title: '提示', text: '确认删除该商品吗?' }) .then(() => { Message({ type: 'success', text: '删除成功' }) }) .catch(() => { // 点击取消按钮触发 Message({ type: 'warn', text: '取消删除' }) }) } }
点击确定触发 then ,点击取消触发 catch
-
使用
$confirm
全局注册组件的 index.js 文件中 install 函数中
app.config.globalProperties.$confirm = Confirm
在使用时引入
getCurrentInstance
方法import { getCurrentInstance } from 'vue' setup(){ const instance = getCurrentInstance() // instance.proxy 相当于vue2中的 this instance.proxy.$confirm({ title: '提示', text: '确认删除该商品吗?' }) .then(() => { Message({ type: 'success', text: '删除成功' }) }) .catch(() => { // 点击取消按钮触发 Message({ type: 'warn', text: '取消删除' }) }) }
效果