vue2自定义插件

1.新建插件文件夹 plugin， 新建文件 index.js index.vue
index.vue

<template>
  <div >
    <button type="primary" @click="onSelect">选择</Button>
    <button type="primary" @click="onCancel">取消</Button>
    <button type="primary" @click="onEdit">修改</Button>
  </div>
</template>
<script>
export default {
  name: 'plugin-1',
  data() {
    return {
      title: "实例",
      id: 11101,
    };
  },
  methods: {
    onSelect() {
      console.log("选择了");
    },
    onCancel() {
      console.log("取消了");
    },
    onEdit() {
      console.log("修改了");
      this.id = 11;
    },
  },
};
</script>

index.js

import component from './index.vue'
const install = function (Vue) {
  const constructor = Vue.extend(component)
  const instance = new constructor()
  instance.$mount(document.createElement('div'))
  document.body.appendChild(instance.$el)
  Vue.prototype.$plugin1 = (options = {}) => {
    instance.$data.title = options.title
    instance.show = true
    return new Promise((resolve, reject) => {
      let onSelect = instance.onSelect;
      let onCancel = instance.onCancel;
      instance.onSelect = () => {
        onSelect()
        resolve(instance.id)
      }
      instance.onCancel = () => {
        onCancel();
        reject(new Error('取消'))
      }
    })
  }
}
export default install
main.js

```javascript
import plugin from './Plugin'
Vue.use(plugin)

引用

 this.$plugin({ title: "标题" })
      .then((res) => {
        console.log("res", res);
      })
      .catch((e) => {
        console.log("“取消了”", e);
      });

// 将引用出的值传入组件在option 中传值，然后通过instance复制
// 将组件中的传出来 （来确定按了哪个 按钮等）

instance.callback = function (action) {
      if (action == "success") {
        option.success && option.success('返回值');
        instance.dialogVisible = false;
      } else if (action == "cancle") {
        option.cancle && option.cancle();
        instance.dialogVisible = false;
      }
    };