本文共 3818 字，大约阅读时间需要 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/