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

本文实例为大家分享了vue + element ui实现锚点定位的具体代码，供大家参考，具体内容如下
因为项目没有引入第三方UI库，所以所有的公共组件都需要自己封装
现在需要一个全局的弹窗，要有promise异步处理
实现后的效果

文章图片

// components/confirm文件.popup-wrap {width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); position: fixed; top: 0rem; left: 0rem; right: 0rem; bottom: 0rem; z-index: 9999; display: flex; align-items: center; justify-content: center; .popup-center {width: 990px; height: 413px; background-size: 990px 413px; display: flex; align-items: center; justify-content: center; .popup-content {position: absolute; width: 970px; height: 393px; background: linear-gradient(180deg,rgba(5, 20, 39, 0.9) 0%,rgba(3, 17, 33, 0.9) 54%,rgba(1, 33, 74, 0.9) 100%); .popup-close {cursor: pointer; position: relative; top: 45px; left: 900px; width: 26px; height: 26px; border: 1px solid #fff; background-size: 100% 100%; }.title {text-align: center; margin-top: 50px; font-size: 40px; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: #258df9; line-height: 56px; background: linear-gradient(180deg, #afebff 0%, #ffffff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }.describe {text-align: center; margin-top: 30px; font-size: 28px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #a4bace; line-height: 40px; }}}.btn {width: 540px; height: 76px; margin: 0 auto; margin-top: 45px; display: flex; align-items: center; justify-content: space-between; .btn-right {cursor: pointer; width: 200px; height: 76px; border: 2px solid #a4bace; font-size: 30px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #a4bace; line-height: 76px; text-align: center; &.active {border: 2px solid #258df9; background: rgba(37, 141, 249, 0.3); color: #afebff; }}}}

// js文件，这个文件看你们自己吧，写在哪里都可以// utils/confirm.jsimport 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" // 引入jsimport Confirm from '@/components/confirm'//Confirm组件Vue.config.productionTip = false //阻止启动生产消息，常用作指令消息提示的环境配置，设置为开发环境或者生产环境Vue.prototype.$confirm = Confirm.install; //Confirm组