确认框组件
import { createVNode, render } from 'vue-demi'
import XtxConfirm from './xtx-confirm.vue'
// 准备一个DOM
const div = document.createElement('div')
div.setAttribute('class', 'xtx-confirm-container')
document.body.appendChild(div)
// 返回的是promise对象，点取消销毁组件，点确认销毁组件
export default ({ title, text }) => {
// 1. 导入被创建的组件
// 2. 使用createVNode创建虚拟节点
// 3. 准备一个dom容器装载组件
// 4. 使用render函数渲染组件到容器
return new Promise((resolve, reject) => {
// 点击取消触发的函数
const cancelCallback = () => {
render(null, div)
reject(new Error('点击取消'))
}
// 点击确认触发的函数
const submitCallback = () => {
render(null, div)
resolve()
}
const vn = createVNode(XtxConfirm, { title, text, cancelCallback, submitCallback })
render(vn, div)
})
}
<template>
<div class="xtx-confirm" :class="{fade}">
<div class="wrapper" :class="{fade}">
<div class="header">
<h3>{{title}}</h3>
<a @click="cancel" 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">
<XtxButton @click="cancel" size="mini" type="gray">取消</XtxButton>
<XtxButton @click="submit" size="mini" type="primary">确认</XtxButton>
</div>
</div>
</div>
</template>
<script>
import { onMounted, ref } from 'vue'
import XtxButton from './xtx-button'
export default {
name: 'XtxConfirm',
components: { XtxButton },
props: {
title: {
type: String,
default: '温馨提示'
},
text: {
type: String,
default: ''
},
cancelCallback: {
type: Function
},
submitCallback: {
type: Function
}
},
setup (props) {
// 对话框默认隐藏
const fade = ref(false)
// 组件渲染完毕后
onMounted(() => {
// 过渡效果需要在元素创建完毕后延时一会加上才会触发
setTimeout(() => {
fade.value = true
}, 0)
})
// 取消
const cancel = () => {
// 其他事情
props.cancelCallback()
}
// 确认
const submit = () => {
// 其他事情
props.submitCallback()
}
return { cancel, submit, fade }
}
}
</script>
<style scoped lang="less">
.xtx-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,.5);
}
.wrapper {
width: 400px;
background: #fff;
border-radius: 4px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-60%);
opacity: 0;
&.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>
