Vue之使用Promise自定义confirm确认框组件

参考网址:https://www.cnblogs.com/conglvse/p/9667647.html文件目录如图所示:使用Promise模拟浏览器确认框，可自定义标题，内容，按钮文字和类型在iconfont库下载所需要的icon图标添加购物车并下载至本地，引入下载的iconfont文件夹在项目文件夹components下新建一个目标文件夹Confirm----新建文件Confirm.vue,代

gyuei

2850人浏览 · 2020-05-13 17:40:19

gyuei · 2020-05-13 17:40:19 发布

参考网址:https://www.cnblogs.com/conglvse/p/9667647.html
文件目录如图所示:
在这里插入图片描述

使用Promise模拟浏览器确认框，可自定义标题，内容，按钮文字和类型
在iconfont库下载所需要的icon图标添加购物车并下载至本地，引入下载的iconfont文件夹
在项目文件夹components下新建一个目标文件夹Confirm----新建文件Confirm.vue,代码示例如下:

<template>
    <!-- 组件参考网址：https://www.cnblogs.com/conglvse/p/9667647.html -->
    <transition name="fade">
        <!--框-->
        <div class="hx-confirm-wrap" v-if="visible" @click="handleAction('close')">
            <!--模态框-->
            <div class="hx-confirm-modal">
                <!--内容-->
                <!-- 说明：@click.stop="stopAction() @click.prevent="stopAction()阻止冒泡事件  防止点击模态框空白内容时关闭模态框 -->
                <div class="hx-confirm-content" @click.stop="stopAction()">
                    <!-- 头部 -->
                    <div class="hx-confirm-header">
                        {{title}}
                        <button class="close" @click="handleAction('close')">
                            <span>&times;</span>
                        </button>
                    </div>
                    <!-- 身体 -->
                    <div class="hx-confirm-body">
                        <!-- 图片 -->
                        <svg
                            v-if="type=='error'"
                            class="icon-font hx-icon-font-error"
                            aria-hidden="true"
                        >
                            <use xlink:href="#icon-error" />
                        </svg>
                        <!-- 图片 -->
                        <svg
                            v-if="type=='success'"
                            class="icon-font hx-icon-font-success"
                            aria-hidden="true"
                        >
                            <use xlink:href="#icon-success" />
                        </svg>
                        <!-- 图片 -->
                        <svg
                            v-if="type=='warn'"
                            class="icon-font hx-icon-font-warn"
                            aria-hidden="true"
                        >
                            <use xlink:href="#icon-warn" />
                        </svg>
                        {{content}}
                    </div>
                    <!-- 底部 -->
                    <div class="hx-confirm-foot">
                        <!-- 通过v-if来判断当变量值为空时按钮不存在 -->
                        <button
                            v-if="cancelBtnText"
                            class="hx-custombtn-cancel"
                            @click="handleAction('cancel')"
                        >{{cancelBtnText}}</button>
                        <button
                            v-if="otherBtnText"
                            class="hx-custombtn-confirm"
                            @click="handleAction('other')"
                        >{{otherBtnText}}</button>
                        <button
                            v-if="yesBtnText"
                            class="hx-custombtn-confirm"
                            @click="handleAction('yes')"
                        >{{yesBtnText}}</button>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>
<script>
export default {
    name: "MyConfirm",
    data() {
        return {
            visible: false,
            title: "", //标题
            content: "", //提示文字
            yesBtnText: "确定", //确定按钮
            cancelBtnText: "取消", //取消按钮
            otherBtnText: "", //其他按钮  (如果只需要两个按钮  此部分可不写)
            type: "", 提示类型success warn error(图标) 可忽略
            promiseStatus: null
        };
    },
    watch: {},
    methods: {
        confirm() {
            let _this = this;
            this.visible = true; //显示模态框
            return new Promise(function(resolve, reject) {
                _this.promiseStatus = { resolve, reject };
            });
        },
        //点击按钮触发函数
        handleAction(action) {
            this.visible = false; //关闭模态框
            if (action == "yes") {
                //点击确认按钮
                this.promiseStatus && this.promiseStatus.resolve();
            } else {
                //点击取消按钮
                this.promiseStatus && this.promiseStatus.reject();
            }
        },
        //阻止冒泡事件的空函数
        stopAction() {
            console.log("阻止事件冒泡");
        }
    }
};
</script>
<style scope>
button {
    border: none;
    background: none;
}
.hx-confirm-wrap {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    background-color: rgba(0, 0, 0, 0.3);
}
.hx-confirm-modal {
    height: 100%;
    position: relative;
    padding: 20px;
    margin: auto;
}
@media (min-width: 768px) {
    .hx-confirm-modal {
        width: 500px;
    }
    .hx-confirm-content {
        width: 400px;
    }
}
@media (max-width: 768px) {
    .hx-confirm-modal {
        width: 80%;
    }
    .hx-confirm-content {
        width: 95%;
    }
}
.hx-confirm-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 180px;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 6px;
    -webkit-animation: zoom 0.6s;
    animation: zoom 0.6s;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
    -moz-user-select: none; /*火狐*/ /*选中文字时避免出现蓝色背景*/
    -webkit-user-select: none; /*webkit浏览器*/ /*选中文字时避免出现蓝色背景*/
    -ms-user-select: none; /*IE10*/ /*选中文字时避免出现蓝色背景*/
    -khtml-user-select: none; /*早期浏览器*/ /*选中文字时避免出现蓝色背景*/
    user-select: none; /*选中文字时避免出现蓝色背景*/
}
.hx-confirm-header {
    color: #2ea7e0;
    font-size: 20px;
    padding: 20px;
}
.close {
    float: right;
    font-size: 38px;
    line-height: 0.5;
    font-weight: normal;
}

.hx-confirm-body {
    padding: 15px 20px;
}
.hx-confirm-foot {
    padding: 20px;
    text-align: right;
}
/* 确定按钮 */
.hx-custombtn-confirm {
    outline: none;
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid #2ea7e0;
    background: #2ea7e0;
}
/* 取消按钮 */
.hx-custombtn-cancel {
    outline: none;
    color: #2ea7e0;
    padding: 6px 12px;
    border-radius: 4px;
    background: none;
    border: 1px solid #cccccc;
}
.icon-font {
    width: 16px;
    height: 16px;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
/* 成功标识 */
.hx-icon-font-success {
    fill: #2baf2b !important;
}
/* 警告标识 */
.hx-icon-font-warn {
    fill: #f0a818 !important;
}
/* 失败标识 */
.hx-icon-font-error {
    fill: #e02121 !important;
}
</style>

在路由文件夹router下找到index.js文件，添加如下所示代码:

import Confirm from '@/components/Confirm/Confirm.vue'
const ConfirmBox = Vue.extend(Confirm);
Vue.use(Router)

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();
};

main.js

import $ from 'jquery'
import Confirm from '@/components/Confirm/Confirm'//Confirm组件
Vue.config.productionTip = false//阻止启动生产消息，常用作指令  消息提示的环境配置，设置为开发环境或者生产环境
Vue.prototype.$my_confirm = Confirm.install;//Confirm组件

页面调用,以App.vue为例

<template>
    <div id="app">
        <!-- 写入@click="show1()"事件调用 -->
        <img src="./assets/logo.png" @click="show1()" />
        <router-view />
    </div>
</template>

<script>
$(document).ready(function() {
    console.log("eeeeeeeeeeeeeeeeeeeeee");
});
export default {
    data: function() {
        return {};
    },
    name: "App",
    methods: {
        //调用模态框
        show() {
            this.$my_confirm("是否登录?", {
                yesBtnText: "登录"
            })
                .then(() => {
                    console.log(action);
                    //点登录
                })
                .catch(() => {
                    console.log("点取消点取消点取消点取消点取消");
                    //点取消
                });
        },
        show1() {
            this.$my_confirm("此操作将永久删除该文件, 是否继续？", "提示", {
                type: "warn",
                yesBtnText: "是",
                cancelBtnText: "否",
                otherBtnText: "其他"
            })
                .then(action => {
                    if (action == "yes") {
                        console.log("点击了确认按钮");
                    } else if (action == "other") {
                        console.log("点击了其他按钮");
                    }
                })
                .catch(() => {
                    //点取消
                    console.log("点击了取消按钮cancel");
                });
        }
    }
};
</script>

最终效果如图所示：
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^