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: [e-mail]
     * @date: 2021-01-10 
     */
    const data = reactive({
        // 菜單顯示標識
        modalShow: props.modalShow
    });
 
    /**
     * @name: 點擊確定/關閉按鈕（父組件監聽點擊）
     * @author: camellia
     * @email: [e-mail]
     * @date: 2021-01-26 
     */
    const confirmModal = (sign:boolean) => {
      // 子組件向父組件傳值 
      content.emit('confirmModal', sign);
    }
 
    /**
     * @name: 將data綁定值dataRef
     * @author: camellia
     * @email: [e-mail]
     * @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: [e-mail]
         * @date: 2021-01-18
         */
        const data = reactive({
            // 是否登錄標識
            loginSign: false,
            // modal顯示標識
            modalShow: false,
            // modal標題
            modalTitle: '評論回復',
            // 回復評論內容
            comment_content_replay: '',
            // 郵箱
            email:'',
        });
 
 
        /**
         * @name: 提交回復(點擊模態框確定或者取消)
         * @author: camellia
         * @email: [e-mail]
         * @date: 2021-01-26 
         * @param:  sign    boolean 點擊確定傳true，點擊取消傳false
         */
        const confirmModal = (sign: boolean) => {
            // 關閉模態框
            if (!sign) 
            {
                data.modalShow = false; return;
            }
            // 編寫你想做的操作
        }
 
        /**
         * @name: 打開模態框
         * @author: camellia
         * @email: [e-mail]
         * @date: 2021-01-26 
         */
        const openModal = (replyid:string) => {
            data.modalShow = true;
            data.replyid = replyid;
        }
        
        /**
         * @name: 獲取評論回復wangeditor數據
         * @author: camellia
         * @email: [e-mail]
         * @date: 2021-01-27 
         */
        const getWangEditorReplayValue = (str: string) => {
            data.comment_content_replay = str;
        }
        /**
         * @name: 將data綁定值dataRef
         * @author: camellia
         * @email: [e-mail]
         * @date: 2021-01-10
         */
        const dataRef = toRefs(data);
        return {
confirmModal, getWangEditorReplayValue, openModal
            ...dataRef
        }
    },
};

我這個實例中引用的是wangeditor的自定義組件，隨便換成點什么都是可以的。

當然 wangeditor組件的封裝后邊也會說到。

有好的建議，請在下方輸入你的評論。

歡迎訪問個人博客
https://guanchao.site

歡迎訪問小程序：