// 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: "", //標(biāo)題
? ? ? 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文件，這個(gè)文件看你們自己吧，寫(xiě)在哪里都可以
// utils/confirm.js
import Confirm from '@/components/confirm.vue'
import Vue from "vue";
const ConfirmBox = Vue.extend(Confirm);
/* @使用方法 this.$confirm進(jìn)行調(diào)用
?* this.$confirm("此操作將永久刪除該文件, 是否繼續(xù)？", "確定執(zhí)行刪除操作嗎", {
? ? ? cancelBtnText: "取消",
? ? ? yesBtnText: "確認(rèn)執(zhí)行",
? ? })
? ? .then(() => {
? ? ? console.log("點(diǎn)擊了確認(rèn)按鈕");
? ? })
? ? .catch(() => {
? ? ? console.log("點(diǎn)擊了取消按鈕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 在根路徑進(jìn)行掛載
import "@/util/confirm" // 引入js
import Confirm from '@/components/confirm' ?//Confirm組件
Vue.config.productionTip = false //阻止啟動(dòng)生產(chǎn)消息，常用作指令 ?消息提示的環(huán)境配置，設(shè)置為開(kāi)發(fā)環(huán)境或者生產(chǎn)環(huán)境
Vue.prototype.$confirm = Confirm.install; //Confirm組

// 使用?
// home.vue
<template>
?? ?<div @click="handleClick">點(diǎn)擊</div>
</template>

<script>
export.default = {
?? ?data () {},
?? ?methdos: {
?? ??? ?handleClick () {
?? ??? ??? ?this.$confirm("此操作將永久刪除該文件, 是否繼續(xù)？", "確定執(zhí)行刪除操作嗎", {
?? ??? ? ? ? ? ?cancelBtnText: "取消",
?? ??? ? ? ? ? ?yesBtnText: "確認(rèn)執(zhí)行",
?? ??? ? ? ? ?})
?? ??? ? ? ? ?.then(() => {
?? ??? ? ? ? ? ?console.log("點(diǎn)擊了確認(rèn)按鈕");
?? ??? ? ? ? ?})
?? ??? ? ? ? ?.catch(() => {
?? ??? ? ? ? ? ?console.log("點(diǎn)擊了取消按鈕cancel");
?? ??? ? ? ? ?});
?? ??? ?}
?? ?}
}
</script>