接着自定义组件，这里是我自定义的一个modal对话框组件。
效果如下图所示：
Modal.vue
<template> <div class="modal-backdrop" v-if="modalShow"> <div class="modal" > <div class="modal-header"> <div><h3>{{title}}</h3></div> <div> <img src="/@/assets/img/close.png" class="close-img" @click="confirmModal(false)"> </div> </div> <div class="modal-body"> <!-- 插槽 官方文档：https://cn.vuejs.org/v2/guide/components-slots.html --> <slot /> </div> <div class="modal-footer"> <button type="button" class="btn-close" @click="confirmModal(false)">关闭</button> <button type="button" class="btn-confirm" @click="confirmModal(true)">确认</button> </div> </div> </div> </template> <style lang="scss" scoped> @import "../../assets/css/components/pc/Modal.scss"; </style> <script lang="ts"> // 引入路由 import { reactive, toRefs, } from "vue"; // 引入公共js文件 import utils from "/@/assets/js/public/function"; // 引入axios钩子 import axios from "/@/hooks/axios.ts"; export default { name: 'modal', props: { modalShow: { type: Boolean, default: false, }, title: { type: String, default: '提示', }, }, // VUE3语法 setup函数 // 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-10 */ const data = reactive({ // 菜单显示标识 modalShow: props.modalShow }); /** * @name: 点击确定/关闭按钮（父组件监听点击） * @author: camellia * @email: guanchao_gc@qq.com * @date: 2021-01-26 */ const confirmModal = (sign:boolean) => { // 子组件向父组件传值 content.emit('confirmModal', sign); } /** * @name: 将data绑定值dataRef * @author: camellia * @email: guanchao_gc@qq.com * @date: 2021-01-10 */ const dataRef = toRefs(data); return { confirmModal, ...dataRef } }, } </script>
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; }
组件调用：
<template> <div @click=”openModal()”>打开模态框</div> <Modal v-on:confirmModal="confirmModal" :modalShow="modalShow" :title="modalTitle"> <div style="width:100%;padding-left:20px" > <Wangeditor v-on:getWangEditorValue="getWangEditorReplayValue" ></Wangeditor> <div class="input-button" style="margin-bottom:0px" v-if="!loginSign"> <input type="text" placeholder="请输入您的邮箱！" v-model="email" style="width:100%"> </div> </div> </Modal> </template> 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组件的封装后边也会说到。
