基于element封装下弹窗

最新推荐文章于 2023-10-20 11:19:05 发布

小墨宝

最新推荐文章于 2023-10-20 11:19:05 发布

阅读量603

点赞数

分类专栏： vue element

本文链接：https://blog.csdn.net/qq_38935512/article/details/104689924

版权

vue 同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

element

13 篇文章 0 订阅

订阅专栏

基础层：dialog

<!-- 自定义弹窗模板 -->
<template>
    <el-dialog
        v-bind="$attrs"
        :close-on-click-modal="$attrs['close-on-click-modal'] ? $attrs['close-on-click-modal'] : false"
        :close-on-press-escape="$attrs['close-on-press-escape'] ? $attrs['close-on-press-escape'] : false"
        v-on="$listeners"
        
    >
      <!-- <slot name="dialog" /> -->
      <slot name="body" />
      <template slot="footer">
        <slot name="footer" />
      </template>
    </el-dialog>
</template>

<script>
export default {
  name: "dialog",
  mounted() {
    //初始化title,防止冲突
    this.$el.title="";
  },
};
</script>
<style lang='scss' scoped>
.flexFooter{
    display: flex;
    justify-content: flex-end;
}
</style>

引用逻辑层：

<!--  -->
<template>
  <Dialog :visible="visible" :title="info.title" width="400px" @close="closeDialog">
        <div slot="body">
           <div class="message"  ><span>{{info.message}}</span></div>
        </div>
        <div slot='footer' class="flexFooter">
            <button type="button" class="z-button mr20" @click="closeDialog">取消</button>
            <button type="button" class="z-button-warning" @click="onSuccess" v-if="warning">确定</button>
            <button type="button" class="z-button-primary" @click="onSuccess" v-if="!warning">确定</button>
        </div>
    </Dialog>
</template>

<script>
export default {
    name:'title',
    components: {
        Dialog:resolve => resolve(require("./dialog"))
    },
    props:{
        info:{
            type:Object,
            default:{title:'提示'}
        },
        visible:{
            type:Boolean,
            default:false
        },
        warning:{
            type:Boolean,
            default:false
        }
    },
    data () {
        return {
            
        };
    },

    computed: {},

    created() {
    },

    methods: {
        closeDialog(){
            this.$emit("update:visible",false)
        },
        onSuccess(){
            this.$emit("onSuccess")
        }
    }
}

</script>
<style lang='scss' scoped>
.message{
  display: flex;
  align-items: center;
  height:140px
}
</style>

二级弹窗

<!--  -->
<template>
  <Dialog :visible="visible" :title="info.title" width="400px" @close="closeDialog">
        <div slot="body">
		        <el-dialog
				      width="30%"
				      title="内层 Dialog"
				      :visible.sync="innerVisible"
				      append-to-body>
				    </el-dialog>
				    <div slot="footer" class="dialog-footer">
				      <el-button @click="outerVisible = false">取 消</el-button>
				      <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
				    </div>
				  </el-dialog>
		           <div class="message"  ><span>{{info.message}}</span></div>
        </div>
        <div slot='footer' class="flexFooter">
            <button type="button" class="z-button mr20" @click="closeDialog">取消</button>
            <button type="button" class="z-button-warning" @click="onSuccess" v-if="warning">确定</button>
            <button type="button" class="z-button-primary" @click="onSuccess" v-if="!warning">确定</button>
        </div>
    </Dialog>
</template>

<script>
export default {
    name:'title',
    components: {
        Dialog:resolve => resolve(require("./dialog"))
    },
    props:{
        info:{
            type:Object,
            default:{title:'提示'}
        },
        visible:{
            type:Boolean,
            default:false
        },
        warning:{
            type:Boolean,
            default:false
        }
    },
    data () {
        return {
            
        };
    },

    computed: {},

    created() {
    },

    methods: {
        closeDialog(){
            this.$emit("update:visible",false)
        },
        onSuccess(){
            this.$emit("onSuccess")
        }
    }
}

</script>
<style lang='scss' scoped>
.message{
  display: flex;
  align-items: center;
  height:140px
}
</style>