外掛通常用來為 Vue 新增全域性功能

使用外掛

通過 Vue 的全域性方法 Vue.use() 使用，

當然，在使用這個方法之前，你的 Vue 例項 必須已經初始化完成

import myPlugin from './plugIn/myPlugin'
 
// 該方法，會呼叫 myPlugin 的 install 方法
 
Vue.use(myPlugin)

開發外掛 （寫一個 confirm 例子）

定義confirmtemplate

<template>
  <div class="confirm_warp" @click="closeCallBack(false)"
 
 id="confirm" v-if="show" >
        <div class="count" @click.stop="">
            <div class="confirm_header">
                <slot name="confirm_header">{{config.title}}</slot>
            </div>
            <div class="confirm_body">
                    <div 
 
v-if="config.vnode && config.vnode!=''" v-html="config.vnode"></div>
                    <span v-else>{{config.content}}</span>
                <!-- <slot name="confirm_body"></slot> -->
            </div>
            <div class="confirm_footer">
 

                <span class="sure" v-if="config.r_btn && config.r_btn!=''"  @click="sureCallBack(true)">{{config.r_btn}}</span>
                <span class="close" v-if="config.l_btn && config.l_btn!=''" @click="closeCallBack(false)">{{config.l_btn}}</span>
            </div>
        </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() { 
    return {
        show: false
    }
  },
  props: {
      confirmOption:{
          type:Object,
          default:()=>{
              return {
                'title':'提示',
                'content':'',
                'r_btn':'繼續',
                'l_btn':'取消',
              }
          }
      }
  },
  components:{
  },
  mounted() {

  },
  methods:{
    //   取消按鈕
    close_confrim(){
        this.$emit('close_confrim')
    },
    // 確認按鈕
    sure_confrim(){
        this.$emit('sure_confrim')
    }
  },
 }
</script>

<style scoped>
.confirm_warp{background-color: rgba(0, 0, 0, 0.5);position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 1111;}
.confirm_warp .count{min-width: 360px;position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);background-color: #ffffff;border-radius: 4px;}
.confirm_warp .count .confirm_body{padding: 20px;min-height: 40px;}
.confirm_warp .count .confirm_footer{padding: 20px;min-height: 40px;text-align: center;}
.confirm_warp .count .confirm_footer span{display: inline-block;font-size: 14px;padding: 4px 25px;cursor: pointer;border-radius: 2px;}
.confirm_warp .count .confirm_footer .sure{background-color: #E62679;color: #ffffff;}
.confirm_warp .count .confirm_footer .close{background-color: #ffffff;color: #E62679;border: 1px solid #E62679;padding: 3px 25px;margin-left: 20px;}

</style>

定義Confirm.js

import confirmIn from './confirmIndex.vue'

import Vue from 'vue'
/*
 *    this.$lstconfirm({
        title:'這是什麼東西~',//標題
        r_btn:'確定',//左側按鈕
        l_btn:'取消',//右側按鈕
        vnode:'<span>餓哦是內容區域</span>',//內容自定義部分
        content:"我也不知道這是什麼東西啊！！！"//內容文字
      }).then(res=>{
          console.log(res)//點選按鈕回撥函式
      })
 */

let confirmIndex = {};

confirmIndex.install = function (Vue,options) {
    const confirmIndexConstructor = Vue.extend(confirmIn);

    // 生成一個該之類的例項
    const instance = new confirmIndexConstructor();

    Vue.prototype.$lstconfirm = (config) => {

        // 這裡 return 一個 Promise 
        // 在專案中使用的時候，就可以進行鏈式呼叫了~
        return new Promise((resolve,reject) => {
            instance.config = config;

            instance.show = true;

            instance.sureCallBack = () => {
                instance.show = false;
                resolve(true)
            }

            instance.closeCallBack = () => {
                instance.show = false;
                resolve(false)
            }
        })
    }
    // 將這個例項掛載在我建立的div上
    // 並將此div加入全域性掛載點內部

    instance.$mount(document.createElement('div'))
 
    document.body.appendChild(instance.$el)

}

export default confirmIndex;

目錄結構

在main.js安裝

// 引入自定義confirm 提示框
import confirmIndex from './plugin/confirm/confirmIndex'
Vue.use(confirmIndex)

在專案中使用

this.$lstconfirm({
        title:'這是什麼東西~',//標題
        r_btn:'確定',//左側按鈕
        l_btn:'取消',//右側按鈕
        vnode:'<span>餓哦是內容區域</span>',//內容自定義部分
        content:"我也不知道這是什麼東西啊！！！"//內容文字
      }).then(res=>{
          console.log(res)//點選按鈕回撥函式
      })