博客
关于我
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-5.7.18安装
查看>>
MySQL-8.0.16 的安装与配置
查看>>
MySQL-Buffer的应用
查看>>
mysql-cluster 安装篇(1)---简介
查看>>
mysql-connector-java.jar乱码,最新版mysql-connector-java-8.0.15.jar,如何愉快的进行JDBC操作...
查看>>
mysql-connector-java各种版本下载地址
查看>>
mysql-EXPLAIN
查看>>
MySQL-Explain的详解
查看>>
mysql-group_concat
查看>>
MySQL-redo日志
查看>>
MySQL-【1】配置
查看>>
MySQL-【4】基本操作
查看>>
Mysql-丢失更新
查看>>
Mysql-事务阻塞
查看>>
Mysql-存储引擎
查看>>
mysql-开启慢查询&所有操作记录日志
查看>>
MySQL-数据目录
查看>>
MySQL-数据页的结构
查看>>
MySQL-架构篇
查看>>
MySQL-索引的分类(聚簇索引、二级索引、联合索引)
查看>>