vue extend+promise封装全局弹窗组件

本文实例为大家分享了vue + element ui实现锚点定位的具体代码，供大家参考，具体内容如下

因为项目没有引入第三方UI库，所以所有的公共组件都需要自己封装
现在需要一个全局的弹窗，要有promise异步处理

实现后的效果

// components/confirm文件

// js文件，这个文件看你们自己吧，写在哪里都可以
// utils/confirm.js
import Confirm from '@/components/confirm.vue'
import Vue from "vue";
const ConfirmBox = Vue.extend(Confirm);
/* @使用方法 this.$confirm进行调用
 * this.$confirm("此操作将永久删除该文件, 是否继续？", "确定执行删除操作吗", {
      cancelBtnText: "取消",
      yesBtnText: "确认执行",
    })
    .then(() => {
      console.log("点击了确认按钮");
    })
    .catch(() => {
      console.log("点击了取消按钮cancel");
    });
 */
  Confirm.install = (content, title, options) => {
    if (typeof title === 'object') {
      options = title;
      title = '';
    } else if (title === undefined) {
      title = '';
    }
  
    options = Object.assign({
      title: title,
      content: content,
    }, options);
  
    let instance = new ConfirmBox({
      data: options
    }).$mount();
    document.body.appendChild(instance.$el);
    return instance.confirm();
  };

// mine.js 在根路径进行挂载
import "@/util/confirm" // 引入js
import Confirm from '@/components/confirm'  //Confirm组件
Vue.config.productionTip = false //阻止启动生产消息，常用作指令  消息提示的环境配置，设置为开发环境或者生产环境
Vue.prototype.$confirm = Confirm.install; //Confirm组

// 使用 
// home.vue

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。