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

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

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

实现后的效果

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

 	// components/confirm文件
 	<template>
 	     <div class="popup-wrap" v-if="showPopup">
 	     <div class="popup-center">
 	     <div class="popup-content">
 	     <div class="popup-close" @click="close"></div>
 	     <div class="title">{{ title }}</div>
 	     <div class="describe">{{ content }}</div>
 	     <div class="btn">
 	         <div :class="['btn-right', active == 'cancal'   'active' : '']" @click="handleClick('cancal')">{{cancelBtnText}}</div>
 	         <div :class="['btn-right', active == 'yes'   'active' : '']" @click="handleClick('yes')">{{yesBtnText}}</div>
 	     </div>
 	     </div>
 	     </div>
 	     </div>
 	</template>
 	 
 	<script>
 	export default {
 	     data() {
 	     return {
 	     showPopup: false,
 	     title: "", //标题
 	     content: "", //提示文字
 	     yesBtnText: "", //确定按钮
 	     cancelBtnText: "", //取消按钮
 	     promiseStatus: null,
 	     active: "",
 	     };
 	     },
 	     watch: {},
 	     props: {},
 	     mounted () {
 	     this.confirm()
 	     },
 	     methods: {
 	     confirm() {
 	     this.showPopup = true;
 	     return new Promise((resolve, reject) => {
 	     this.promiseStatus = { resolve, reject };
 	     });
 	     },
 	     handleClick(e) {
 	     this.active = e;
 	     if (e == "yes") {
 	     this.promiseStatus & &  this.promiseStatus.resolve();
 	     } else {
 	     this.promiseStatus & &  this.promiseStatus.reject();
 	     }
 	     this.showPopup = false
 	     },
 	     close() {
 	     this.showPopup = false
 	     this.promiseStatus & &  this.promiseStatus.reject();
 	     // this.$emit("close");
 	     },
 	     },
 	};
 	</script>
 	<style lang="less" scoped>
 	.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;
 	     }
 	     }
 	     }
 	}
 	</style>
 	// 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
 	<template>
 	     <div @click="handleClick">点击</div>
 	</template>
 	 
 	<script>
 	export.default = {
 	     data () {},
 	     methdos: {
 	     handleClick () {
 	     this.$confirm("此操作将永久删除该文件, 是否继续?", "确定执行删除操作吗", {
 	         cancelBtnText: "取消",
 	         yesBtnText: "确认执行",
 	         })
 	         .then(() => {
 	         console.log("点击了确认按钮");
 	         })
 	         .catch(() => {
 	         console.log("点击了取消按钮cancel");
 	         });
 	     }
 	     }
 	}
 	</script>

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

标签

发表评论