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>

Vue组件封装 ——dialog对话框组件相关推荐

php 小程序自定义图,微信小程序之如何使用自定义组件封装原生 image 组件
零.问题的由来一般在前端展示图片时都会碰到这两个常见的需求: 图片未加载完成时先展示占位图,等到图片加载完毕后再展示实际的图片. 假如图片链接有问题(比如 404),依然展示占位图.甚至你还可以增加 ...
VCL组件之公用对话框组件
公用对话框是一类非可视的组件,它们都由TDialog类继承而来,存在Dialogs组件面板上.包括: TOpenDialog--打开文件对话框组件,用它选择文件和浏览目录 TSaveDialog--保 ...
基于vue element 封装上传组件
基于vue element封装的上传组件使用方法: 1.首先引入该组件 2.注册组件 3.页面使用 4.回调函数(如需其他回调自行封装因为我暂时没用到其他的哈哈哈) <template& ...
html5加vue弹窗,Vue制作弹出对话框组件
之前写过一个组件的文章,算是入门,也是官网的例子,这个纯粹自己再写一遍,之前的文章 html结构这也是官网的一个例子首先我把生成后的html复制过来,分成两部分,一部分是一个按钮,用来弹出对话框, ...
封装Dialog子组件解决 visible.sync问题
子组件 1.visible.sync语法糖简单介绍 ** <child-dialog :visible.sync="visible"></child-dialog ...
在uni-app中使用vue语法封装个计数器组件
效果如下: 1.在components中新建个counter.vue 组件 <template><view class="counter ...
Vue组件封装 ——input 输入框组件
一.基础准备工作 1.创建一个基础的vue项目包 2.创建components文件夹,用于存放组件,新建input.vue组件,可以自己取个名字 <script> export def ...
组件封装 - 省市区联动组件
首先, 讲述一下这个组件需要实现的需求: 1. 在页面显示完整用户选择的省市区信息 2. 此组件是作用在别的组件里面, 接收父组件传入完整的省市区信息; 提供模板中使用 3. 根据后端规定的字段名定义 ...
组件封装 - 面包屑组件
我们主要分为三个部分: 1. 初级的面包屑 2. 高阶的面包屑(过渡) 3. 高阶的面包屑(终极) 现在就来封装一个最简易的面包屑组件简易面包屑只能兼容两级, 如果说有两级以上的; 这样的面包屑组件 ...

Vue组件封装 ——dialog对话框组件

一、基础准备工作

二、dialog组件结构搭建

Vue组件封装 ——dialog对话框组件相关推荐

最新文章

热门文章