三分鐘學會Vue自定義插件-----實現一個alert/confirm插件

使用Vue開發的過程中，我們會在很多地方用到一些同樣的功能，比如說提示彈窗，這種時候我們可以自定義一個插件，方便在多個地方使用。

項目目錄結構：

• modules：放置模塊的文件夾，裏面有一個 alert 文件夾，用於存放 alert 插件 ；
• Alert.vue：就是我們要在多處用到提示彈窗組件；
• index.js：對於該自定義插件的一些配置；

代碼編寫：

• Alert.vue

<template>
  <!-- 初始狀態下隱藏提示框 -->
  <div v-show="isShow">
    <div class="alert">
      <div class="flex">{{msg}}</div>
      <!-- alert插件只顯示確定按鈕 -->
      <div v-if="type === 'alert'">
        <div class="btnCommon success" @click="close">確定</div>
      </div>
      <!-- confirm插件顯示取消和確定按鈕 -->
      <div class="space-around" v-else>
        <div class="btnCommon cancel" @click="cancelEvent">取消</div>
        <div class="btnCommon success" @click="successEvent">確定</div>
      </div>
    </div>
    <!-- 背景遮罩 -->
    <div class="mask" @click="closeMask"></div>
  </div>
</template>

<script>
export default {
  name: 'Alert',
  props: {
    // 提示信息
    msg: {
      type: String,
      default: ''
    },
    // 是否顯示提示框
    isShow: {
      type: Boolean,
      default: false
    },
    // 插件類型：alert/confirm
    type: {
      type: String,
      default: 'alert'
    },
    // confirm插件接收的確認事件
    success: {
      type: Function,
      default: () => {
        console.log('點擊了success');
      }
    },
    // confirm插件接收的取消事件
    cancel: {
      type: Function,
      default: () => {
        console.log('點擊了cancel');
      }
    }
  },
  methods: {
    // 關閉彈窗
    close() {
      this.isShow = false
    },
    // alert 插件點擊陰影區域關閉彈窗
    closeMask() {
      if(this.type === 'alert') {
        this.close();
      }
    },
    // confirm 插件點擊取消觸發的事件
    cancelEvent() {
      this.cancel();
      this.close();
    },
    // confirm 插件點擊確定觸發的事件
    successEvent() {
      this.success();
      this.close();
    }
  }
}

</script>
<style lang='scss' scoped>
$btnMain: #009688;
$btnDark: darken($btnMain, 5%);

.alert {
  width: 300px;
  height: 150px;
  position: fixed;
  left: 50%;
  margin-left: -150px;
  top: 50%;
  margin-top: -75px;
  padding: 20px 10px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 5px 8px rgba(0, 0, 0, .05);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.space-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

.btnCommon {
  width: 105px;
  line-height: 32px;
  text-align: center;
  border-radius: 6px;
  &.success {
    background-color: $btnMain;
    color: #fff;
    cursor: pointer;
    &:hover {
      background-color: $btnDark;
    }
  }
  &.cancel {
    background-color: #ededed;
    color: #333;
    cursor: pointer;
  }
}

.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .4);
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 2000;
}
</style>

• index.js

import AlertComponent from './Alert.vue';

const Alert = {}

// Vue暴露了一個install方法，用於自定義插件
Alert.install = function (Vue) {
  // 創建一個子類
  const AlertConstructor = Vue.extend(AlertComponent);
  // 實例化這個子類
  const instance = new AlertConstructor();
  // 創建一個div元素，並把實例掛載到div元素上
  instance.$mount(document.createElement('div'));
  // 將el插入到body元素中
  document.body.appendChild(instance.$el);

  // 添加實例方法
  // alert插件的實例方法：只接收提示信息msg
  Vue.prototype.$alert = msg => {
    instance.type = 'alert';
    instance.msg = msg;
    instance.isShow = true;
  };
  // confirm插件的實例方法，可以接收三個參數
  // msg：提示信息
  // success：點擊確定執行的函數
  // cancel：點擊取消執行的函數
  Vue.prototype.$confirm = (msg, success, cancel) => {
    instance.type = 'confirm';
    instance.msg = msg;
    instance.isShow = true;
    if(typeof success !== 'undefined') {
      instance.success = success;
    }
    if(typeof cancel !== 'undefined') {
      instance.cancel = cancel;
    }
  }
}

export default Alert;

至此，我們的自定義插件就差最後點睛一筆了，只需要使用 Vue.use 方法將插件安裝進去即可。

• main.js

import Vue from 'vue'
import App from './App.vue'
import alert from './modules/alert'

Vue.config.productionTip = false
Vue.use(alert)  // 注意，Vue.use方法必須在new Vue之前被調用

new Vue({
  render: h => h(App),
}).$mount('#app')

使用方法：

使用起來很簡單，以兩個按鈕來觸發彈窗爲例子。

• App.vue

<template>
  <div id="app">
    <button @click="handleAlert">alert</button>
    <button @click="handleConfirm">confirm</button>
  </div>
</template>

<script>

export default {
  name: 'App',
  methods: {
    handleAlert() {
      this.$alert('測試')
    },
    handleConfirm() {
      this.$confirm('測試Confirm', () => {
        console.log('這是確定事件');
      }, () => {
        console.log('這是取消事件');
      })
    }
  }
}
</script>

• 頁面效果

• 點擊 alert 按鈕

• 點擊 confirm 按鈕

• 點擊確定按鈕

• 點擊取消按鈕

 

這樣就實現了一個簡單的Vue自定義插件，我們在各個組件中可以很方便地去調用它們。