前端小白从0到1搭建vue ui库(PC端)第三步 dialog组件

453 阅读2分钟

dialog组件

组件基本代码

<template>
    <!-- 最外面的是背景遮罩层 -->
    <transition name="dialog-fade">
        <!-- 最外层的@click.self和主体的@click.stop选一个 -->
        <div class="tls-dialog-mask" v-if="visible" @click="handleClose"><!-- @click.self="handleClose" -->
            <!-- 主体 -->
            <div class="tls-dialog" :style="{width,marginTop:top}" @click.stop>
                <!-- 标题 -->
                <div class="tls-dialog-header">
                    <slot name="title">
                        <span class="tls-dialog-title">{{title}}</span>
                    </slot>
                    <button class="tls-dialog-closebtn" @click="handleClose">
                        <i class="tls-icon-close"></i>
                    </button>
                </div>
                <!-- 内容(默认插槽) -->
                <div class="tls-dialog-body">
                    <slot></slot>
                </div>
                <!-- 底部 -->
                <div class="tls-dialog-footer" v-if="$slots.footer">
                    <slot name="footer"></slot>
                </div>
            </div>
        </div>
    </transition>
</template>

组件可接受的参数props

title

文章标题

   title: {
        type: String,
        default: ""
    },

width

弹窗宽度

    width: {
        type: String,
        default: "50%"
    },

top

距离顶部高度

    top: {
        type: String,
        default: "15vh"
    },

visible

弹窗关闭控制

    visible: {
        type: Boolean,
        default: false
    }

组件事件

handleClose(关于sync修饰符)

处理弹窗关闭事件,需要sync修饰符

    handleClose() {
        this.$emit("update:visible", false);
    }

这个修饰符是这个组件里面最关键的一点,没有之一。

一般来说,控制弹窗显示与否的变量是在父组件,但是我们又需要在子组件里面去关闭这个弹窗,那么问题来了,学过vue的朋友应该都知道,子组件内部一般情况下是不可以对父组件的值进行修改。

按照一般思路,我们需要在子组件里面写一个方法去提醒父组件修改值(类似下面)

子组件 child

sendData(){
    this.$emit('tofather',false)//这里的false指需要传的值
}

父组件

<child :visible="visible" @tofather="handlechild"></child>
handlechild(data){
    console.log(data);
    this.visible=data;//这里在对值进行修改
}

这样写可以实现,但是很麻烦,用起来也不人性化,vue这么强大的框架怎么可能让这种事情发现,所以vue提供了一个sync修饰符,它将操作简化了,我们只需要在组件提交事件

this.$emit("update:visible", false);

这一步等于顺便告诉父组件去修改值,这样父组件就会默认有一个事件去修改我们传入子组件的值,当然,我们在调用组件的时候需要这样写

<tls-dialog :visible.sync="visible"></tls-dialog>

这样写等于

<tls-dialog :visible="visible" :update:visible="visible = $event"></tls-dialog>

组件样式

这里用到css的动画效果和vue的transition,当然,也可以直接用css来控制,不需要用vue的动画过渡,看个人喜好

需要样式请移步这里

怎么用

    <tls-dialog title="哈哈哈哈" width="40%" top="300px" :visible.sync="visible">
        <template v-slot:title>
            <h1>喂喂喂</h1>
        </template>
        <div>你好吗</div>
        <template v-slot:footer>
            <tls-button type="primary" @click="visible=false">确定</tls-button>
            <tls-button @click="visible=false">取消</tls-button>
        </template>
    </tls-dialog>

吐槽

日常附上git地址先,本来想更新的快一点,但是这一两周一直在做公司的产品,没有时间来弄这个,好累,好想咸鱼着,有没有富婆来包养我呀~~~