vue弹出框的封装

最新推荐文章于 2025-10-09 19:42:16 发布

原创最新推荐文章于 2025-10-09 19:42:16 发布 · 1.1w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue #弹出框 #封装 #百度 #过渡

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个基于Vue的确认框组件实现方式，该组件具备自定义样式和过渡效果，可通过属性配置不同类型的提示信息及回调函数。

依旧是百度不到自己想要的，就自己动手丰衣足食

弹出框做成单独的组件confirm.vue;

<template>
    <transition name="mask-bg-fade">
        <div class="mask" v-show="show">
            <div class="mask_bg"></div>
            <transition name="slide-fade">
                <div class="modelBox" v-show="show">
                    <div class="tipIcon" v-bind:class="confirmModalOptions.type||'warning'"></div>
                    <div class="closeModel" v-on:click="closeModel()"></div>
                    <div class="title">{{confirmModalOptions.title || "提示"}}</div>
                    <div class="message textCenter">{{confirmModalOptions.message || " "}}</div>
                    <div class="model_btnBox">
                        <button class="dh_button_default2" v-on:click="confirmCancel()">
                            {{confirmModalOptions.btnCancelText || "取消"}}
                        </button>
                        <button class="dh_button_blue" v-on:click="confirmSubmit()">
                            {{confirmModalOptions.btnSubmitText || "确定"}}
                        </button>
                    </div>
                </div>
            </transition>
        </div>
    </transition>
</template>
<script>
  export default {
    props: ["confirmModalOptions"],
    data() {
      return {
        show: false,   // 是否显示模态框
      }
    },
    methods: {
      closeModel: function () {
        this.show = false;
      },
      showModel: function () {
        this.show = true;
      },
      confirmCancel: function () {
        this.show = false;
        if(typeof (this.confirmModalOptions.btnCancelFunction)==='function'){
          this.confirmModalOptions.btnCancelFunction()
        }
      },
      confirmSubmit: function () {
        this.show = false;
        if(typeof (this.confirmModalOptions.btnSubmitFunction)==='function'){
          this.confirmModalOptions.btnSubmitFunction()
        }
      }
    }
  }
</script>
<style lang="scss">

</style>

页面

<d-confirm v-bind:confirmModalOptions="confirmOptions" ref="myConfirm"></d-confirm>

import  DConfirm from 'components/confirm';
components: {  DPromise,},

del: function () {
  this.$refs.myConfirm.showModel();
  this.confirmOptions= {
    type: "warning",//warning
    title: "提示",//提示
    message: "文字内容",//""
    btnCancelText: "取消",//取消
    btnSubmitText: "确定",//确定
    btnSubmitFunction: function () {
      alert("确定")
    },
    btnCancelFunction: function () {
      alert("取消")
    }
  }
},