博客
关于我
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/

你可能感兴趣的文章
MySQL 有什么优点?
查看>>
mysql 权限整理记录
查看>>
mysql 权限登录问题:ERROR 1045 (28000): Access denied for user ‘root‘@‘localhost‘ (using password: YES)
查看>>
MYSQL 查看最大连接数和修改最大连接数
查看>>
MySQL 查看有哪些表
查看>>
mysql 查看锁_阿里/美团/字节面试官必问的Mysql锁机制,你真的明白吗
查看>>
MySql 查询以逗号分隔的字符串的方法(正则)
查看>>
MySQL 查询优化:提速查询效率的13大秘籍(避免使用SELECT 、分页查询的优化、合理使用连接、子查询的优化)(上)
查看>>
mysql 查询数据库所有表的字段信息
查看>>
【Java基础】什么是面向对象?
查看>>
mysql 查询,正数降序排序,负数升序排序
查看>>
MySQL 树形结构 根据指定节点 获取其下属的所有子节点(包含路径上的枝干节点和叶子节点)...
查看>>
mysql 死锁 Deadlock found when trying to get lock; try restarting transaction
查看>>
mysql 死锁(先delete 后insert)日志分析
查看>>
MySQL 死锁了,怎么办?
查看>>
MySQL 深度分页性能急剧下降,该如何优化?
查看>>
MySQL 深度分页性能急剧下降,该如何优化?
查看>>
MySQL 添加列,修改列,删除列
查看>>
mysql 添加索引
查看>>
MySQL 添加索引,删除索引及其用法
查看>>