vue 自定义插件编写之 confirm

插件通常用来为 Vue 添加全局功能

 

使用插件

通过 Vue 的全局方法 Vue.use() 使用，

当然，在使用这个方法之前，你的 Vue 实例 必须已经初始化完成

import myPlugin from './plugIn/myPlugin'

// 该方法，会调用 myPlugin 的 install 方法

Vue.use(myPlugin) 

开发插件 （写一个 confirm 例子）

定义 confirm template

<template>
  <div id="confirm" :id="show?'show':'hidden'">
    <div class="confirm-content">
      <div class="head">{{config.title}}</div>
      <div class="body">确定执行这个操作吗？</div>
      <div class="footer">
        <span class="cancle" @click="cancleBtnClick(false)">取消</span>
        <span class="sure" @click="sureBtnClick(true)">确定</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false
    };
  },
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  methods: {}
};
</script>
<style scoped>
#confirm {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9000;
}
#show {
  display: block;
}
#hidden {
  display: none;
}
.confirm-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  background: white;
  width: 400px;
  height: 250px;
  border-radius: 10px;
}
.head {
  font-weight: bold;
  font-size: 22px;
  text-align: center;
  padding: 15px;
}
.body {
  font-size: 18px;
  padding: 15px;
}
.footer {
  display: flex;
  font-size: 16px;
  line-height: 30px;
  text-align: center;
  padding: 15px;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.footer span {
  cursor: pointer;
  flex: 1;
}
</style>

定义 Confirm.js

import ConfirmView from './Confirm.vue'

import Vue from 'vue'

let Confirm = {};

Confirm.install = function (Vue, options) {

    const ConfirmViewConstructor = Vue.extend(ConfirmView)

    // 生成一个该子类的实例
    const instance = new ConfirmViewConstructor();

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

        // 这里 return 一个 Promise 
        // 在项目中使用的时候，就可以进行链式调用了~
        return new Promise((resolve,reject)=>{

            instance.config = config;

            instance.show = true;

            instance.sureBtnClick = ()=>{

                instance.show = false;

                resolve(true)

            }

            instance.cancleBtnClick = ()=>{

                instance.show = false;

                resolve(false)

            }

        })

    }

    // 将这个实例挂载在我创建的div上
    // 并将此div加入全局挂载点内部
    instance.$mount(document.createElement('div'))

    document.body.appendChild(instance.$el)

}

export default Confirm;

目录结构如下：

在main.js安装

import Confirm from './plugIn/Confirm/Confirm.js'

Vue.use(Confirm)

在项目中使用

 this.$lzyconfirm({

     title:'这是什么东西~',

     content:"我也不知道这是什么东西啊！！！"

}).then(res=>{

     console.log(res)

})

效果如下：

分别点击取消和确定的时候，上面的 console 会打印出来 false 和 true