1、首先创建conform.vue，其内容如下：

<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">x</a>--><a @click="cancel" href="JavaScript:;" >x</a></div><div class="body"><i class="iconfont icon-warning"></i><span>{{text}}</span></div><div class="footer"><span @click="cancel" class="cancel">取消</span><span @click="submit" class="submit">确认</span></div></div></div>
</template>
<script setup>
import { onMounted, ref } from 'vue'const props = defineProps({title: {type: String,default: '温馨提示'},text: {type: String,default: ''},// 传递函数进来cancelCallback: {type: Function},submitCallback: {type: Function}
});// 对话框默认隐藏
const fade = ref(false)
// 组件渲染完毕后
onMounted(() => {// 过渡效果需要在元素创建完毕后延时一会加上才会触发setTimeout(() => {fade.value = true}, 0)
})
// 取消
const cancel = () => {// 其他事情props.cancelCallback()
}
// 确认
const submit = () => {// 其他事情props.submitCallback()
}// 下边这种不是setup的写法也可
// export default {//   name: 'conform',
//   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);//background: rgba(0,0,0,.5);&.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;//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: red;margin-right: 3px;font-size: 16px;}}.footer {text-align: right;cursor: pointer;.cancel{margin-right: 20px;cursor: pointer;}.submit{cursor: pointer;}//.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>

2、编写conform.js其内容如下：

import { createVNode, render } from 'vue'
import conform from './components/conform.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('点击取消'))reject("取消")}// 点击确认触发的函数const submitCallback = () => {render(null, div)resolve('确认')}//  不光传递字段，还可以传递函数const vn = createVNode(conform, { title, text, cancelCallback, submitCallback })render(vn, div)})
}

3、在app.vue中使用，其内容如下：

<template><span @click="sure">点击弹出遮罩/确认按钮</span>
</template><script setup>
import Conform from "@/conform";
// import {ref} from "vue";
const sure = () => {Conform({text:"确认删除吗？"}).then((e)=>{console.log(e)}).catch((e)=>{console.log(e)})
}
</script><style scoped lang="less">
</style>

4、效果如下：

vue 弹出自定义确认取消对话框使用createVNode, render相关推荐

QT TextEdit设置背景、明文加密、弹出网站、弹出自定义对话框、gif动态图片、程序启动动画、打包程序、关闭事件
TextEdit设置背景前提必须已添加了资源图片铭文加密 ui->passLineEdit->setEchoMode(QLineEdit::Password); 弹出网站 #inclu ...
js 弹出确认取消对话框
文章目录 js 弹出确认取消对话框一种: <a href="javascript:if(confirm('确实要删除该内容吗?'))location='http://www.goo ...
wpf 点击按钮弹出新对话框_WPF弹出自定义窗口的方法
本文实例讲述了WPF弹出自定义窗口的方法.分享给大家供大家参考,具体如下: 测试环境: [1]VS2010SP1 [2]WPF(.NET Framework 4)项目内容简介 WPF工程如何弹出自定 ...
ConfirmCancelUtilDialog【确认取消对话框封装类】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言对确认取消对话框的封装. 前提:调用对话框的Activity必须继承FragmentActivity及其子类(比如AppCompat ...
【WPF】右下角弹出自定义通知样式（Notification）——简单教程
[WPF]右下角弹出自定义通知样式(Notification)--简单教程原文:[WPF]右下角弹出自定义通知样式(Notification)--简单教程 1.先看效果 2.实现 1.主界面是Mai ...
Winform像菜单一样弹出自定义内容实现示例
在实际工作中,如果能像菜单一样弹出自定义内容,会方便很多,比如查询时,比如下拉列表显示多列信息时,比如在填写某个信息需要查看一些信息树时.这个时候自定义弹出界面就显的非常重要了我这里其实用到的是网上 ...
对div实现右键弹出自定义菜单
实现只对蓝色的Div弹出自定义菜单,其他位置弹出默认的浏览器菜单 js代码如下: <script type="text/javascript">$(function() ...
微信小程序-弹出自定义对话框
最近,需要在小程序里做一个弹出对话框的操作,微信提供的 showmodal 也达不到我想要的效果,于是自己尝试... 如图: 大神看了莫喷,希望能帮助到刚入门的小伙伴... 代码 : wxml: &l ...
弹出html对话框样式,对话框或弹出自定义样式的3种方法
1.使用Activity实现在AndroidManifest.xml中修改Actity的主题android:theme="@style/MyDialogStyleBottom" ...

vue 弹出自定义确认取消对话框使用createVNode, render

1、首先创建conform.vue，其内容如下：

2、编写conform.js其内容如下：

3、在app.vue中使用，其内容如下：

4、效果如下：

vue 弹出自定义确认取消对话框使用createVNode, render相关推荐

最新文章

热门文章