vue自定義組件 (兩種之二)彈窗為例

方式: 利用js代碼,在必要時候動態彈出組件, 而不需要Vue.use,也必在頁面上寫組件.

依據: 

vm.$mount( [elementOrSelector] )

• 參數：

  • {Element | string} [elementOrSelector]
  • {boolean} [hydrating]

• 返回值：vm - 實例自身

• 用法：

  如果 Vue 實例在實例化時沒有收到 el 選項，則它處於“未掛載”狀態，沒有關聯的 DOM 元素。可以使用 vm.$mount() 手動地掛載一個未掛載的實例。

  如果沒有提供 elementOrSelector 參數，模板將被渲染為文檔之外的的元素，並且你必須使用原生 DOM API 把它插入文檔中。

vm.$el

• 類型：Element

• 只讀

• 詳細：

  Vue 實例使用的根 DOM 元素。

Vue.extend( options )

• 參數：

  • {Object} options

• 用法：

  使用基礎 Vue 構造器，創建一個“子類”。參數是一個包含組件選項的對象。

方法:

    (一)用Vue.extend(vueComponent對象), 返回一個以參數對象為模板的vue組件實例的 構造函數.

            這個構造函數參數是{date,methods}這種形式,會覆蓋在VueComponent里的相同數據值,

     (二)定義一個函數, 函數執行做三件事:

         1用這個構造函數創建vue的一個vue組件實例,

         2 掛載它,掛載方法直接是 vm.$mount();參加$mount的Api

         3 用原生方法將這個實例插到body里.

     (三)將這個構造函數掛載在Vue.prototype上. 注意,讓這個組件消失的方法是$el.remove();

代碼:  在components文件夾下新建一個文件夾,里面有alert.vue和index.js兩個文件

     alert.vue模板的代碼:

<template>
  <div class="shade">
    <div class="mian">
      <div class="content">
        <span>{{ message }}</span>
      </div>
      <div class="btns">
        <div
          class="btn"
          v-for="(btn,index) in btns"
          :key="index"
          @click="()=>clickFn(btn)"
        >{{btn.text}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "alert",
  data() {
    return {
      // message: "this a alert",
      // btns: [
      //   {
      //     text: "yes",
      //     click: () => console.log("yes")
      //   },
      //   {
      //     text: "no",
      //     click: () => console.log("no")
      //   }
      // ]
    };
  },
  methods: {
    clickFn(btn) {
      this.$el.remove(); // 移除DOM this.$el表示這個vm實例的根元素
      const { click = () => console.warn("請傳入回調函數") } = btn; //es6的結構賦值, btn.click如果有值,則賦值給click,否則賦值為匿名函數
      click(); // 執行傳遞進來的click方法
    }
  }
};
</script>

<style scoped>
.shade {
  user-select: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.03);
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shade .mian {
  background: white;
  width: 80%;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  animation: open 0.1s;
}

.shade .mian .content {
  box-sizing: border-box;
  width: 100%;
  padding: 30px 20px;
}

.shade .mian .btns {
  height: 45px;
  box-sizing: border-box;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.shade .mian .btns .btn {
  flex: 1 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.shade .mian .btns .btn:last-child {
  border-right: none;
}

.shade .mian .btns .btn:active {
  color: white;
  background-color: rgb(64, 169, 243);
}

@keyframes open {
  0%, 100% {
    transform: scale(1);
  }

  25%, 75% {
    transform: scale(1.04);
  }

  50% {
    transform: scale(1.06);
  }
}
</style>

index.js的代碼

import Vue from 'vue';
import alert from './alert.vue';
let MyAlertConstructor = Vue.extend(alert);//創建vm實例的構造函數
let instance;
const MyAlert = (option) => { //寫一個重要的方法,里面有三個內容
  // 創建實例並且過濾參數
  
  instance = new MyAlertConstructor({ //1生成實例
    data: option 
  })
                                      // 2 掛載實例
  instance.$mount();
  document.body.appendChild(instance.$el);//3原生方法插入body
  return instance;
}
export default MyAlert;

主文件main.js里, 掛載方法

 import MyAlert from './components/Toast1';//自定義彈框 2 Vue.prototype.$alert = MyAlert; 

使用方法:

在組件的js文件里, 當需要彈出時候, 用this.$alert({data:{

  message: "你今天開心嗎?",
        btns: [
          {
            text: "開心",
            click: () => {
              // 測試是否可以拿到這邊的this
              console.log(this.msg);
            }
          },
          {
            text: "不開心",
            click: () => {
              // 這里的event target 可能沒用 因為已經移除DOM了
              // 返回btn原來本身
              console.log("不開心");
            }
          },
          {
            text: "無回調"
            // 測試一下沒有回調函數的時候
          },
          {
            text: "幫助",
            click: this.isOK
          }
        ]

 

}})