博客
关于我
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中的collate关键字是什么意思?
查看>>
MySql中的concat()相关函数
查看>>
mysql中的concat函数,concat_ws函数,concat_group函数之间的区别
查看>>
MySQL中的count函数
查看>>
MySQL中的DB、DBMS、SQL
查看>>
MySQL中的DECIMAL类型:MYSQL_TYPE_DECIMAL与MYSQL_TYPE_NEWDECIMAL详解
查看>>
MySQL中的GROUP_CONCAT()函数详解与实战应用
查看>>
MySQL中的IO问题分析与优化
查看>>
MySQL中的ON DUPLICATE KEY UPDATE详解与应用
查看>>
mysql中的rbs,SharePoint RBS:即使启用了RBS,内容数据库也在不断增长
查看>>
mysql中的undo log、redo log 、binlog大致概要
查看>>
Mysql中的using
查看>>
MySQL中的关键字深入比较:UNION vs UNION ALL
查看>>
mysql中的四大运算符种类汇总20多项,用了三天三夜来整理的,还不赶快收藏
查看>>
mysql中的字段如何选择合适的数据类型呢?
查看>>
MySQL中的字符集陷阱:为何避免使用UTF-8
查看>>
mysql中的数据导入与导出
查看>>
MySQL中的时间函数
查看>>
mysql中的约束
查看>>
MySQL中的表是什么?
查看>>