Vue?dialog模態(tài)框如何封裝

這篇“Vue dialog模態(tài)框如何封裝”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue dialog模態(tài)框如何封裝”文章吧。

效果如圖

首先我們需要一個(gè)遮罩層

<template>
    <div class="myDialog">
        <div v-if="visable" class="dialog_mask" @click="close"></div>
    </div>
</template>
<style>
  .dialog_mask {
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.418);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 122;
  }
</style>

然后是主體部分

<!-- 模態(tài)框內(nèi)容部分 -->
      <div v-if="visable" class="dialog_window" @mousedown="moveDialog">
        <header>
          <!-- 傳入的標(biāo)題 -->
          <h6>{{ title }}</h6>
          <!-- x號(hào)關(guān)閉 -->
          <span @click="close">x</span>
        </header>
        <!-- 插槽插入中間的內(nèi)容 -->
        <div class="ctx">
          <slot></slot>
        </div>
        <!-- 插槽插入底部按鈕 -->
        <div class="footer">
          <slot name="footer"></slot>
        </div>
</div>

props傳入的值

props: {
    visable: {  // 數(shù)據(jù)顯示隱藏
      type: Boolean,
      default: false,
    },
    title: {  // 標(biāo)題
      type: String,
    },
    move: {  // 是否可拖動(dòng)
      type: Boolean,
      default: false,
    }
  },

對(duì)應(yīng)的事件

methods: {
    close() {  // 關(guān)閉功能
      this.$emit("update:visable", false); // .sync修飾符  父子組件同步更新
      this.callBack(this.visable);
    },
    moveDialog(e) {  // 拖動(dòng)
      if (!this.move) return false;
      let odiv = e.target;
 
      let disX = e.clientX - odiv.offsetLeft;
      let disY = e.clientY - odiv.offsetTop;
 
      document.onmousemove = (e) => {
        let left = e.clientX - disX;
        let top = e.clientY - disY;
 
        odiv.style.left = left + "px";
        odiv.style.top = top + "px";
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmousedown = null;
      };
    },
  },

以上就是關(guān)于“Vue dialog模態(tài)框如何封裝”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。