博客
关于我
VUE3(二十五)自定义Modal对话框组件
阅读量:395 次
发布时间:2019-03-05

本文共 3799 字,大约阅读时间需要 12 分钟。

接着自定义组件,这里是我自定义的一个modal对话框组件。

效果如下图所示:

在这里插入图片描述

Modal.vue

Modal.scss

.close-img{     width: 30px;margin-right: 12px; margin-top: 12px; cursor: pointer;}.modal-backdrop {        position: fixed;     top: 0;     right: 0;     bottom: 0;     left: 0;     background-color: rgba(0,0,0,.3);     display: flex;     justify-content: center;     align-items: center;     z-index:20;}.modal {        background-color: #fff;     box-shadow: 2px 2px 20px 1px;     overflow-x:auto;     display: flex;     flex-direction: column;    border-radius: 16px;    width: 700px;} .modal-header {        border-bottom: 1px solid #eee;     color: #313131;     justify-content: space-between;    padding-left: 15px;     display: flex; } .modal-footer {        border-top: 1px solid #eee;     justify-content: flex-end;    padding: 15px;     display: flex; } .modal-body {        position: relative;     padding: 20px 10px; }.btn-close, .btn-confirm {           border-radius: 8px;    margin-left:16px;    width:56px;    height: 36px;    border:none;    cursor: pointer;}.btn-close {       color: #313131;    background-color:transparent;}.btn-confirm {       color: #fff;     background-color: #2d8cf0;}

组件调用:

import { reactive, toRefs,} from "vue";import Wangeditor from "/@/components/pc/Wangeditor.vue";import Modal from "/@/components/pc/Modal.vue";export default { name: "articleDetail", components: { Wangeditor, Modal, }, // VUE3 语法 第一个执行的钩子函数 // setup官方文档 // https://www.vue3js.cn/docs/zh/guide/composition-api-setup.html#参数 setup(props: any, content: any) { /** * @name: 声明data * @author: camellia * @email: guanchao_gc@qq.com * @date: 2021-01-18 */ const data = reactive({ // 是否登录标识 loginSign: false, // modal显示标识 modalShow: false, // modal标题 modalTitle: '评论回复', // 回复评论内容 comment_content_replay: '', // 邮箱 email:'', }); /** * @name: 提交回复(点击模态框确定或者取消) * @author: camellia * @email: guanchao_gc@qq.com * @date: 2021-01-26 * @param: sign boolean 点击确定传true,点击取消传false */ const confirmModal = (sign: boolean) => { // 关闭模态框 if (!sign) { data.modalShow = false; return; } // 编写你想做的操作 } /** * @name: 打开模态框 * @author: camellia * @email: guanchao_gc@qq.com * @date: 2021-01-26 */ const openModal = (replyid:string) => { data.modalShow = true; data.replyid = replyid; } /** * @name: 获取评论回复wangeditor数据 * @author: camellia * @email: guanchao_gc@qq.com * @date: 2021-01-27 */ const getWangEditorReplayValue = (str: string) => { data.comment_content_replay = str; } /** * @name: 将data绑定值dataRef * @author: camellia * @email: guanchao_gc@qq.com * @date: 2021-01-10 */ const dataRef = toRefs(data); return { confirmModal, getWangEditorReplayValue, openModal ...dataRef } },};

我这个实例中引用的是wangeditor的自定义组件,随便换成点什么都是可以的。

当然 wangeditor组件的封装后边也会说到。

有好的建议,请在下方输入你的评论。

欢迎访问个人博客

欢迎访问小程序:

在这里插入图片描述

转载地址:http://xqhwz.baihongyu.com/

你可能感兴趣的文章
MSCRM调用外部JS文件
查看>>
MSCRM调用外部JS文件
查看>>
MSEdgeDriver (Chromium) 不适用于版本 >= 79.0.313 (Canary)
查看>>
MsEdgeTTS开源项目使用教程
查看>>
msf
查看>>
MSP430F149学习之路——SPI
查看>>
msp430入门编程45
查看>>
MSSQL数据库查询优化(一)
查看>>
MSSQL数据库迁移到Oracle(二)
查看>>
MSSQL日期格式转换函数(使用CONVERT)
查看>>
MSTP多生成树协议(第二课)
查看>>
MSTP是什么?有哪些专有名词?
查看>>
Mstsc 远程桌面链接 And 网络映射
查看>>
Myeclipse常用快捷键
查看>>
MyEclipse更改项目名web发布名字不改问题
查看>>
MyEclipse用(JDBC)连接SQL出现的问题~
查看>>
mt-datetime-picker type="date" 时间格式 bug
查看>>
myeclipse的新建severlet不见解决方法
查看>>
MyEclipse设置当前行背景颜色、选中单词前景色、背景色
查看>>
Mtab书签导航程序 LinkStore/getIcon SQL注入漏洞复现
查看>>