搭建自己的组件库<2>dialog 组件

目录

设置title

插槽显示

控制宽高

关闭对话框

transition实现动画

引入深度选择器


同样创建组件dialogue.vue后全局注册

dialogue模版:

<template><!-- 对话框的遮罩 --><div class="miao-dialog_wrapper"><!-- 真的对话框 --><div class="miao-dialog"><div class="miao-dialog_header"><span class="miao-dialog_title">提示</span><button class="miao-dialog_headerbtn"><i class="miao-icon-close"></i></button></div><div class="miao-dialog_body"><span>这是一段信息</span></div><div class="miao-dialog_footer"><miao-button>取消</miao-button><miao-button type="primary">确定</miao-button></div></div></div>
</template>

设置title

第一步,设置title为传入的参数

app.vue里:

<miao-dialog title="温馨提示"></miao-dialog>

dialogue.vue里

props:{title:{type:String,default:'提示'}
}

插槽显示

第二步用插槽显示

这在dialogue.vue里

<slot name="title"><span class="miao-dialog_title">{{ title }}</span></slot><!-- 把这个class包在插槽里意思是有插槽显示插槽,没插槽显示里面的title文字 -->

在app.vue里

<miao-dialog><template v-slot:title><h3>我是变化</h3></template>
</miao-dialog>

这样如果title啥都不传显示默认值,并且通过slot可以设置传入是h3还是h2等格式

控制宽高

通过style里的width和top控制dialog的宽度和距离顶部的距离

app.vue

<miao-dialog width="40%" top="10px"></miao-dialog>

dialog.vue

<div class="miao-dialog" :style="{width:width,marginTop:top}">

然后设置

width:{type: String,default: '50%'},top:{type: String,default: '15vh'// 类似于15%}

然后通过插槽控制body部分

app.vue

<miao-dialog width="40%" top="10px"><ul><li>1</li><li>2</li></ul></miao-dialog>

dialog.vue

<div class="miao-dialog_body"><!-- 默认插槽  --><slot></slot></div>

接下来控制footer,footer里显示两个按钮,但是底部两个按钮也是想传才传

所以也添加slot控制

app.vue里:

<miao-dialog width="40%" top="10px"><ul><li>1</li><li>2</li></ul><template v-slot:footer><miao-button type="primary">确定</miao-button><miao-button>取消</miao-button></template></miao-dialog>

关闭对话框

dialog.vue里

关闭部分:

除了按钮之外点击对话框的icon❎也应该关闭他:

<button class="miao-dialog_headerbtn" @click="handleClose"><i class="miao-icon-close"></i></button>

点击子组件dialogue.vue不能直接修改父组件数据

所以在函数handleclose里触发父组件

methods:{handleClose(){// this.visible=false,不行避免直接修改props//得让父组件改,应该触发事件this.$emit('close',false)}
}

在app.vue里:

<miao-dialog width="40%" top="10px" :visible="visible" @close="close"><ul><li>1</li><li>2</li></ul><template v-slot:footer><miao-button type="primary" @click="visible=false">确定</miao-button><miao-button @click="visible=false">取消</miao-button></template></miao-dialog>

@ close="close"

close(value){
this.visible=value
},

这样点击该icon就能关闭对话框了

此外,需要点击遮罩层也能关闭对话框,但是对话框内部也包括在遮罩层里,所以通过@click.self 阻止冒泡

或者通过sync语法糖,(子组件希望修改父组件的visible)

使用方法:

在子组件里:

demo.vue

<button @click="fn">aaa</button>
methods:{fn(){this.$emit('update:money',30)this.$emit('update:visible', true)}}

父组件里:
 

 <demo :visible.sync="visible" :money.sync="money"></demo>

不用再写函数注册事件了,比如省去了

update:money(value){this.money=value}

没有改变单向数据流,只是让父组件使用更简单

transition实现动画

通过transition实现动画(千万记得.5s

<transition  name="aa"><div v-show="visible">我是文本</div></transition>

第一种写动画的css方式:

.aa-enter{opacity: 0;
}
// aa对应name属性,enter显示前,to显示后,active显示中
.aa-enter-to{opacity: 1;
}
.aa-enter-active{transition: all .5s;
}// 离开同样三个类名
.aa-leave{opacity: 1;
}
.aa-leave-to{opacity: 0;
}.aa-leave-active{transition: all .5s
}

第二种写动画的方式(采用)

.aa-enter{opacity: 0;
}
// aa对应name属性,enter显示前,to显示后,active显示中
.aa-enter-to{opacity: 1;
}
.aa-enter-active{transition: all .5s;
}// 离开同样三个类名
.aa-leave{opacity: 1;
}
.aa-leave-to{opacity: 0;
}.aa-leave-active{transition: all .5s
}

css里前面那个aa是变化的根据name来,后面的是固定的

接下来让整个dialogue有动画:

.dialog-fade-enter-active {animation: fade .3s;
}.dialog-fade-leave-active {animation: fade .3s reverse;
}@keyframes fade {0% {opacity: 0;transform: translateY(-20px);// 负值向上移动}100% {opacity: 1;transform: translateY(0);}
}
.miao-button{margin-left:8px
}

scoped会给当前组件的模版中的所有元素都添加一个随机的属性

scoped会给当前组件中所有样式也添加一个对应的属性选择器

引入深度选择器

当写了style scoped时候,不会有随机属性选择器

深度选择器 scss里 ::v-deep  less里 /deep/
css >>>
官网链接:

Scoped CSS | Vue Loader

详细代码:

GitHub - Alicca-miao/component-library-vue-ui-Contribute to Alicca-miao/component-library-vue-ui- development by creating an account on GitHub.icon-default.png?t=N7T8https://github.com/Alicca-miao/component-library-vue-ui-

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/850797.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

The 18th Northeast Collegiate Programming Contest(5/9/13)

心得 赛中ac&#xff1a;5&#xff0c;目前ac&#xff1a;9&#xff0c;题目总数&#xff1a;13 中档可做题还是很多的&#xff0c;可惜遇到了难绷的queueforces&#xff0c; 最后15min才判出来&#xff0c;oi赛制5wa4遗憾离场&#xff0c;赛后把几个题都给调过了&#xff0…

GPT大模型微调-提高垂直领域回答质量

微调一个大模型并测试微调后的效果是一个很好的学习实践。下面是一个逐步指导,帮助你使用一个较小的预训练大模型进行微调,并测试其效果。我们将使用 Hugging Face 的 Transformers 库和一个较小的预训练模型,如 DistilBERT。这个库非常流行且易于使用。 实现步骤 步骤 1:…

Rust-07-结构体

结构体 和元组一样&#xff0c;结构体的每一部分可以是不同类型。但不同于元组&#xff0c;结构体需要命名各部分数据以便能清楚的表明其值的意义。由于有了这些名字&#xff0c;结构体比元组更灵活&#xff1a;不需要依赖顺序来指定或访问实例中的值。可以当作是java对象。使…

Macbook M芯片JDK的安装

Macbook M芯片JDK的安装 下载 搜索zulu&#xff1b; 进入这个网址 https://www.azul.com/downloads/#zulu 进入页面后向下滑动 选择对应选项 然后点击Download进行下载。 选择.dmg格式的安装包&#xff0c;点击。 安装 下载完成后&#xff0c;到下载目录&#xff0c;双击…

窗帘怎么选好看不踩坑

雅静说窗帘好看不踩坑,五点全搞定      买窗帘时,别一开口就问多少钱,啥材质,环保不      会显得很小白,容易被坑,      1,大部分窗帘都是涤纶的, 只不过做出来的质感不一样      如果是原木风可以选棉麻质感的,奶油风和现代简约      可以选雪尼尔质感的,…

MSPM0l1306——配置滴答定时器

我们配置好了滴答定时器之后&#xff0c;还要手动编写滴答定时器的中断服务函数&#xff0c;因为我们开启的滴答定时器的中断&#xff0c;当滴答定时器的计数值从我们设置的值减到0时&#xff0c;就会触发一次中断&#xff0c;触发中断就会执行中断服务函数。各个中断的中断服务…

Flutter 中的 DropdownButtonHideUnderline 小部件:全面指南

Flutter 中的 DropdownButtonHideUnderline 小部件&#xff1a;全面指南 Flutter 是一个流行的开源移动 UI 框架&#xff0c;由 Google 开发&#xff0c;允许开发者使用单一的代码库构建高质量的 iOS 和 Android 应用。Flutter 提供了丰富的组件&#xff0c;其中 DropdownButt…

【Spring Boot】异常处理

异常处理 1.认识异常处理1.1 异常处理的必要性1.2 异常的分类1.3 如何处理异常1.3.1 捕获异常1.3.2 抛出异常1.3.4 自定义异常 1.4 Spring Boot 默认的异常处理 2.使用控制器通知3.自定义错误处理控制器3.1 自定义一个错误的处理控制器3.2 自定义业务异常类3.2.1 自定义异常类3…

树莓派 5 AI 套件(Hailo-8L)使用教程

系列文章目录 前言 The Raspberry Pi AI Kit Raspberry Pi AI 套件将 Raspberry Pi M.2 HAT 与 Hailo AI 加速模块捆绑在一起&#xff0c;供 Raspberry Pi 5 使用。套件包含以下内容&#xff1a; 包含神经处理单元&#xff08;NPU&#xff09;的 Hailo AI 模块Raspberry Pi M.…

STM32 proteus + STM32Cubemx仿真教程(第二课按键教程)

文章目录 前言一、STM32按键的原理二、STM32Cubemx创建工程三、proteus仿真电路图四、程序代码编写4.1函数介绍4.2使用按键点亮LED灯 总结 前言 本篇文章开始带大家学习如何使用proteus和STM32Cubemx来完成STM32的学习&#xff0c;第二节课我们先来学习按键的用法。 proteus使…

[docker] docker-compose-mysql.yml

引言&#xff1a;作为一名专业的资深开发&#xff0c;本地一定拥有了不少开源项目以供学习&#xff0c;每次都要去启动 mysql 数据库跟 redis 服务器&#xff0c;这种操作1.挺烦的&#xff0c;挺费时间&#xff0c;每次都要启动命令来一次&#xff1b;2.占用自己电脑的资源&…

五款软件推荐:U盘数据不小心删除了?帮你快速找回!

U盘数据不小心删除了怎么恢复&#xff1f;U盘是一种便携式存储设备&#xff0c;因其小巧轻便而广受欢迎。但是&#xff0c;U盘也常常会遇到数据丢失的问题。当U盘数据丢失时&#xff0c;需要找到一款可靠的数据恢复软件来恢复数据。 接下来为大家推荐5款好用的免费U盘数据恢复软…

Python 使用scrapy框架

1、安装scrapy 2、使用scrapy创建项目,在终端命令行 执行如下命令&#xff0c;会创建一个myproject项目 scrapy startproject myproject 3、创建完成后&#xff0c;目录结构如下 4、cd myproject进入项目 ,执行scrapy genspider weather ******&#xff0c;会在spiders下创建…

Incredibuild for Mac 来了!

Mac 开发者在寻找适合自己需求的工具时可能会遇到一些困难&#xff0c;因为 Mac 操作系统相对封闭&#xff0c;不像其他系统那样开放和灵活。尽管如此&#xff0c;Mac 开发者在开发应用程序时的需求&#xff08;比如功能、效率等&#xff09;和使用其他操作系统的开发者是类似的…

Linux中安装Docker,并使用Docker安装MySQL和Redis

1、安装docker 1卸载系统之前的docker yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine2、安装Docker-CE #安装必须的依赖 sudo yum install -y yum-utils \device-map…

LINUX----进程替换,exec族函数

execl族函数的作用 exel族函数用于调用一个已经存在的可执行程序,将该程序的运行需要的代码区和数据区的数据覆盖原进程,这样就可以实现在一个进程中调度另一个进程. 简单实现一个小功能来看一看 mytest.c #include <stdio.h> #include <unistd.h>int main(){print…

开源VS闭源

当我们谈论大模型时&#xff0c;往往会涉及到开源和闭源两种不同的模型类型&#xff0c;开源和闭源的主要区别在于源代码的访问权限和修改能力。开源意味着软件的源代码对公众开放&#xff0c;任何人都可以查看、修改和分发源代码&#xff0c;这促进了技术的透明性、合作和创新…

抽象的java入门1.3.0

前言&#xff1a; 在1.2.0版本中我们介绍了public class hello {}并从中提取出两个新概 修饰符和作用域 public class hello {public static void main(String[] args) {System.out.println("Hello World");} } 正片&#xff1a; 这一期把剩余的内容刨析出来 pub…

【Redis学习笔记04】Jedis客户端(上)

Java客户端操作Redis Java生态丰富&#xff0c;自定义的客户端非常多&#xff0c;常见的有Jedis、Lettuce、以及Spring整合后的RedisTemplate&#xff0c;但是对于初学者而言&#xff0c;从Jedis开始入门学习是非常容易上手的&#xff0c;因为Jedis中的API与原生Redis命令高度…

Android Bugreport分析工具:ChkBugReport教程

安装&#xff1a; 如果下载地址过期请看原仓库地址的wiki&#xff0c;或许会有更新&#xff1a;https://github.com/sonyxperiadev/ChkBugReport/wiki 提前下载好如下文件&#xff1a; ​​​​​​http://sonyxperiadev.github.io/ChkBugReport/download/chkbugreport (Lau…