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地址先,本来想更新的快一点,但是这一两周一直在做公司的产品,没有时间来弄这个,好累,好想咸鱼着,有没有富婆来包养我呀~~~