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

你可能感兴趣的文章
Mysql8.0的特性
查看>>
MySQL8修改密码报错ERROR 1819 (HY000): Your password does not satisfy the current policy requirements
查看>>
MySQL8修改密码的方法
查看>>
Mysql8在Centos上安装后忘记root密码如何重新设置
查看>>
Mysql8在Windows上离线安装时忘记root密码
查看>>
MySQL8找不到my.ini配置文件以及报sql_mode=only_full_group_by解决方案
查看>>
mysql8的安装与卸载
查看>>
MySQL8,体验不一样的安装方式!
查看>>
MySQL: Host '127.0.0.1' is not allowed to connect to this MySQL server
查看>>
Mysql: 对换(替换)两条记录的同一个字段值
查看>>
mysql:Can‘t connect to local MySQL server through socket ‘/var/run/mysqld/mysqld.sock‘解决方法
查看>>
MYSQL:基础——3N范式的表结构设计
查看>>
MYSQL:基础——触发器
查看>>
Mysql:连接报错“closing inbound before receiving peer‘s close_notify”
查看>>
mysqlbinlog报错unknown variable ‘default-character-set=utf8mb4‘
查看>>
mysqldump 参数--lock-tables浅析
查看>>
mysqldump 导出中文乱码
查看>>
mysqldump 导出数据库中每张表的前n条
查看>>
mysqldump: Got error: 1044: Access denied for user ‘xx’@’xx’ to database ‘xx’ when using LOCK TABLES
查看>>
Mysqldump参数大全(参数来源于mysql5.5.19源码)
查看>>