VUE3（二十五）自定义Modal对话框组件

接着自定义组件，这里是我自定义的一个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组件的封装后边也会说到。

有好的建议，请在下方输入你的评论。

欢迎访问个人博客
https://guanchao.site

欢迎访问小程序：