Vue组件封装之dialog对话框组件详解
作者：黑猫了个怪怪
这篇文章主要介绍了Vue组件封装之dialog对话框组件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
一、基础准备工作
1、创建一个基础的vue项目包
2、创建components文件夹，用于存放组件，新建dialog.vue组件，可以自己取个名字
<script>
export default {
name: "CatDialog",
};
</script>3、在main.js中引入组件
import CatDialog from "./components/dialog.vue"; Vue.component(CatDialog.name, CatDialog);
4、App.vue中使用组件
二、dialog组件结构搭建
dialog对话框，整体有一个动画效果，vue的动画效果，使用transition包裹需要动画展示的元素，那么这个元素在显示/隐藏时自动添加一些类名，此例详见后续代码
对话框分为三部分：
1、头部：左侧为标题，使用具名插槽 title 占位，右侧为按钮/图标（关闭）
2、主体内容，使用不具名的插槽占位
3、底部：一般都是一些操作，使用具名插槽 footer 占位，通常内容是取消/确认按钮
需要传入的参数：
- title：头部标题
- width：对话框宽度
- top：对话框距离顶部的距离
- visible：对话框的显示/隐藏
页面效果：
dialog.vue 具体代码如下，style样式太多，不逐一列出了，可根据需求自己定义：
<template>
<transition name="dialog-fade">
<!--self：事件修饰符，只有点击自己才触发，点击子元素不触发 -->
<div class="cat-dialog__wrapper" v-show="visible" @click.self="handleClose">
<!-- 对话框 -->
<div class="cat-dialog" :style="{ width, marginTop: top }">
<!-- 对话框顶部 标题 + 关闭按钮 -->
<div class="cat-dialog__header">
<slot name="title">
<span class="cat-dialog__title">{{ title }}</span>
</slot>
<button class="cat-dialog__headerbtn" @click="handleClose">
<i class="cat-icon-close"></i>
</button>
</div>
<!-- 对话框内容 -->
<div class="cat-dialog__body">
<slot></slot>
</div>
<!-- 对话框底部 一般都是一些操作，没有传入footer插槽就不显示v-if -->
<div class="cat-dialog__footer" v-if="$slots.footer">
<slot name="footer"></slot>
</div>
</div>
</div>
</transition>
</template><script>
export default {
name: "CatDialog",
props: {
title: {
type: String,
default: "提示",
},
// 弹框宽度
width: {
type: String,
default: "30%",
},
// 弹框距离顶部距离
top: {
type: String,
default: "15vh",
},
visible: {
type: Boolean,
default: false,
},
},
methods: {
handleClose() {
//visible是父组件传过来的props，子组件不能直接修改，需要子传父
this.$emit("update:visible", false);
},
},
};
</script>transition动画代码：
<style lang="scss">
// 进入动画
.dialog-fade-enter-active {
animation: dialog-fade-in 0.4s;
}
// 离开动画
.dialog-fade-leave-active {
animation: dialog-fade-out 0.4s;
}
@keyframes dialog-fade-in {
0% {
transform: translate3d(0, -20px, 0);
opacity: 0;
}
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes dialog-fade-out {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
transform: translate3d(0, -20px, 0);
opacity: 0;
}
}
</style>App.vue使用dialog组件：
<template>
<div>
<Cat-button type="primary" @click="visible = true">点击弹出</Cat-button>
<!--
sync：事件修饰符，是一个语法糖写法，实现子组件修改父组件传入的props
父：visible.sync="visible"
子：this.$emit("update:visible", false)
-->
<Cat-dialog width="25%" top="100px" :visible.sync="visible">
<template v-slot:title>
<h3>标题</h3>
</template>
<template>
<p>主体内容，随便写点什么...</p>
<input type="text" placeholder="请输入信息" />
</template>
<template v-slot:footer>
<Cat-button @click="visible = false">取消</Cat-button>
<Cat-button type="primary" @click="visible = false">确定</Cat-button>
</template>
</Cat-dialog>
</div>
</template><script>
export default {
data() {
return {
visible: false,
};
},
};
</script><style lang="scss" scoped>
.cat-button {
margin-right: 10px !important;
}
</style>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。