...
大前端

vue 做一个插件plugin 插件的创建(install)及使用方法

上篇(https://www.vsay.net/web/279.html ),要做一个全局调用的dialog(web),这种方法只能在web下使用,小程序我还没测哈。

// plugins/dialog.js
import Vue from 'vue';
import MyDialog from '@/components/MyDialog.vue';

const DialogConstructor = Vue.extend(MyDialog);

let instance;

const initInstance = () => {
  instance = new DialogConstructor({
    el: document.createElement('div'),
    data() {
      return {
        visible: false,
        message: '',
      };
    },
  });
  document.body.appendChild(instance.$el);
};

const showDialog = (options = {}) => {
  if (!instance) {
    initInstance();
  }
  instance.message = options.message || '';
  instance.visible = true;

  return new Promise((resolve, reject) => {
    instance.$on('confirm', () => {
      resolve();
    });
    instance.$on('close', () => {
      reject();
    });
  });
};

export default {
  install(Vue) {
    Vue.prototype.$dialog = showDialog;
  },
};
最新版 ADB 工具下载与使用指南 uniapp全局弹窗APP做全局弹窗(dialog)插件的思路
biu biu biu
js reduce函数详解 js 数组处理的常用方法 给你的网站加点花里胡哨~鼠标点击出现随机颜色表情符号😀😁😂😃😄😅😆😇😈😉😊😋😌😍😎😏😐😑😒😓 nginx 80端口重定向到443端口配置 分享一个开源在线工具箱“toolbox“,快速搭建一个自己的在线工具箱