当前位置: 首页 > news >正文

【Vue3】插槽使用和animate使用

插槽使用

      • 插槽slot
          • 匿名插槽
          • 具名插槽
          • 插槽作用域
          • 简写
      • 动态插槽
      • transition动画组件
        • 自定义过渡class类名
        • 如何使用animate动画库组件
        • 动画生命周期
        • appear
      • transition- group过渡列表

插槽slot

  • 插槽就是子组件中提供给父组件使用的一个占位符
  • 父组件可以在这个占位符智能填充任何模板代码,填充的内容会在替换子组件的slot标签
匿名插槽
  • 子组件
<template><div class="main"><h1>子组件</h1><slot></slot></div>
</template><script setup lang="ts">
import { ref, reactive } from 'vue';
</script><style scoped></style>
  • 父组件
<template><div class="main"></div><Aslot><template v-slot><div>匿名插槽</div></template></Aslot>
</template><script setup lang="ts">
import { ref, reactive } from 'vue';
import Aslot from './components/slot.vue';
</script><style scoped></style>
具名插槽
  • 子组件
    在这里插入图片描述
  • 父组件
    在这里插入图片描述
插槽作用域
  • 作用域插槽其实就是带数据的插槽,即带参数的插槽,
  • 简单的来说就是子组件提供给父组件的参数,该参数仅限于插槽中使用
  • 父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。
  • 子组件
<template><div class="main"><slot></slot><h1>子组件</h1><div v-for="(item, index) in data" :key="index">//父组件需要什么值,就传递什么值<slot :data="item" :index="index"></slot></div></div>
</template><script setup lang="ts">
import { ref, reactive } from 'vue';
//定义要给父组件的内容
const data = reactive([{ name: '1', age: 1 },{ name: '2', age: 2 },
]);
</script><style scoped></style>
  • 父组件
<template><div class="main"></div><Aslot><template v-slot="{ data, index }"><div>{{ data }}--{{ index }}</div></template></Aslot>
</template><script setup lang="ts">
import { ref, reactive } from 'vue';
import Aslot from './components/slot.vue';
</script><style scoped></style>
简写
<template><div class="main"></div><Aslot>//v-slot变成# <template #centerslot><div>具名插槽</div></template><template #default="{ data }"><div>{{ data.name }}--{{ data }}</div></template></Aslot>
</template>

动态插槽

在这里插入图片描述

transition动画组件

  • vue提供transition的封装组件,在下列情形下,可以给任何元素和组件添加进入/离开过渡
  • 条件渲染(v-if)
  • 条件展示(v-show)
  • 动态组件
  • 组件根节点
  • 在进入和离开的过渡中,会有6个class的切换

  • name提供类名

<template><div class="main"><!-- transition,动画组件 --><transition name="box"><div v-if="isblooen" class="box-bg">动画盒子</div></transition><button @click="change">切换1</button></div>
</template><script setup lang="ts">
import { ref, reactive } from 'vue';
let isblooen = ref('true');
const change = () => {isblooen.value = !isblooen.value;
};
</script>
//在进入和离开的过渡中,会有6个class的切换
<style scoped lang="less">
.box-bg {width: 200px;height: 200px;border: 1px solid #00f;
}
//显示之前,第一个字母和上面name一致
.box-enter-from {width: 0px;height: 0px;background: #777;
}
//动画开始
.box-enter-active {background: #777;transition: all 10s ease;
}
//动画结束
.box-enter-to {width: 200px;height: 200px;background: #777;
}
//隐藏之前
.box-leave-from {
}
//隐藏中
.box-leave-active {
}
//隐藏后
.box-leave-to {
}
</style>

在这里插入图片描述

自定义过渡class类名
<template><div class="main"><!-- transition,动画组件 --><transition name="box"><div v-if="isblooen" class="box-bg">动画盒子</div></transition><!-- 写法2 自定义过渡class类名--><transitionname="box"enter-form-class="e-form"enter-active-class="e-active"enter-to-class="e-to"><div v-if="isblooen" class="box-bg">动画盒子</div></transition><button @click="change">切换1</button></div>
</template><script setup lang="ts">
import { ref, reactive } from 'vue';
let isblooen = ref('true');
const change = () => {isblooen.value = !isblooen.value;
};
</script><style scoped lang="less">
.box-bg {width: 200px;height: 200px;border: 1px solid #00f;
}
//显示之前
.box-enter-from {width: 0px;height: 0px;background: #777;
}
//写法2,自定义类名
.e-form {width: 0px;height: 0px;background: #777;
}
//动画开始
.box-enter-active {background: #777;transition: all 10s ease;
}
.e-active {background: #755577;transition: all 10s ease;
}
//动画结束
.box-enter-to {width: 200px;height: 200px;background: #777;
}
.e-to {width: 200px;height: 200px;background: #766677;
}
//隐藏之前
.box-leave-from {
}
//隐藏中
.box-leave-active {
}
//隐藏后
.box-leave-to {
}
</style>
如何使用animate动画库组件
  • 安装: npm install animate.css
  • 官方文档地址
  • 步骤2,导入动画库
    在这里插入图片描述
  • 步骤三,使用
  • leave-active-class是6个class的动画类名
    在这里插入图片描述
    在这里插入图片描述
动画生命周期

在这里插入图片描述

appear
  • 通过这个属性可以设置初始节点,就是页面加载完成就开始动画对应的三个状态
  • 相当于一进来,动画就开始执行
<template><div class="main"><transitionappearappear-class="animate__animated animate__backInLeft"appear-active-class="animate__animated animate__backInRight"appear-to-class="animate__animated animate__backOutUp"><div v-if="isblooen" class="box-bg">动画盒子</div></transition><button @click="change">切换1</button></div>
</template><script setup lang="ts">
import { ref, reactive } from 'vue';
import 'animate.css';let isblooen = ref('true');
const change = () => {isblooen.value = !isblooen.value;
};
</script><style scoped lang="less">
.box-bg {width: 200px;height: 200px;border: 1px solid #00f;
}
//显示之前
.box-enter-from {width: 0px;height: 0px;background: #777;
}
.e-form {width: 0px;height: 0px;background: #777;
}
//动画开始
.box-enter-active {background: #777;transition: all 10s ease;
}
.e-active {background: #755577;transition: all 10s ease;
}
//动画结束
.box-enter-to {width: 200px;height: 200px;background: #777;
}
.e-to {width: 200px;height: 200px;background: #766677;
}
//隐藏之前
.box-leave-from {
}
//隐藏中
.box-leave-active {
}
//隐藏后
.box-leave-to {
}
</style>

transition- group过渡列表

  • 相当于transition-group包裹的内容,可以给他们添加,删除,初始化增加动画效果
<template><div class="main"><!-- appear-active-class是初始化动画enter-active-class是添加是动画leave-active-class是删除时动画--><transition-groupappearappear-active-class="animate__animated animate__backInDown"enter-active-class="animate__animated animate__backInDown"leave-active-class="animate__animated animate__lightSpeedInRight"><div v-for="(item, index) in list" :key="index">{{ item }}</div></transition-group><button @click="add">添加</button><button @click="del">删除</button></div>
</template><script setup lang="ts">
import { ref, reactive } from 'vue';
import 'animate.css';
const list = reactive<number>([1, 2, 3, 4, 5, 6]);
//增加
const add = () => {list.push(9);
};
//删除
const del = () => {list.pop();
};
</script><style scoped></style>

在这里插入图片描述

相关文章:

【Vue3】插槽使用和animate使用

插槽使用 插槽slot匿名插槽具名插槽插槽作用域简写 动态插槽transition动画组件自定义过渡class类名如何使用animate动画库组件动画生命周期appear transition- group过渡列表 插槽slot 插槽就是子组件中提供给父组件使用的一个占位符父组件可以在这个占位符智能填充任何模板代…...

HarmonyOS—低代码开发Demo示例

接下来为大家展示一个低代码开发的JS工程的Demo示例&#xff0c;使用低代码开发如下华为手机介绍列表的HarmonyOS应用/服务示例。 1.删除模板页面中的控件后&#xff0c;选中组件栏中的List组件&#xff0c;将其拖至中央画布区域&#xff0c;松开鼠标&#xff0c;实现一个List组…...

Spring体系下解决请求统一加解密之ResponseBodyAdvice和RequestBodyAdvice

在日常写项目中经常一般正规的项目都需要将信息加密后返回前端&#xff0c;前端进行解密后再展示出来给用户&#xff0c;这样做的目的无一不是为了安全&#xff0c;在Java开发中&#xff0c;如何简单快速的完成这个功能呢&#xff0c;这里就需要用到这两个接口ResponseBodyAdvi…...

C# 经典:ref 和 out 的区别详解

在C#中&#xff0c;ref和out关键字用于按引用传递变量&#xff0c;它们在变量传递、输出参数、返回值以及异常处理等方面有一些重要区别。本文将详细阐述这些差异。 1. 变量传递 ref和out关键字都可以用于方法的参数传递。它们的主要区别在于如何处理变量的引用。 ref关键字…...

Linux 系统添加虚拟内存的方法

https://cloud.189.cn/t/6nqy2m3YnUN3 &#xff08;访问码&#xff1a;ic3i&#xff09; 云服务器 群晖NAS 切换到 root 模式 sudo su 或者 sudo -i #群晖/volume2 是你添加的硬盘挂载路径 不一定是 volume2 有可能是 volume1 #如果你只有1快硬盘 volume2 改成 volume1 …...

PHP 函数四

一 fgets(resource $stream, ?int $length null) 从文件指针中读取一行。 返回字符串&#xff0c;如果文件指针中没有更多的数据了则返回 false。错误发生时返回 false。 $stream 为文件资源&#xff0c;必须指向fopen()或fscokopen()成功打开的文件。文件打开之后&#x…...

【Android】反编译APK及重新打包

1.下载 APK 反编译工具 首先&#xff0c;需要下载一个 APK 反编译工具&#xff0c;例如 Apktool。可以在官网&#xff08;https://apktool.org/docs/install&#xff09;上下载最新版本的 Apktool&#xff0c;也可以使用包管理器来安装。 2.反编译 APK 文件 将要修改包名的 …...

下载huggingface数据集到本地并读取.arrow文件遇到的问题

文章目录 1. 524MB中文维基百科语料&#xff08;需要下载的数据集&#xff09;2. 下载 hugging face 网站上的数据集3. 读取 .arrow 文件报错代码4. 纠正后代码 1. 524MB中文维基百科语料&#xff08;需要下载的数据集&#xff09; 2. 下载 hugging face 网站上的数据集 要将H…...

.NET高级面试指南专题十一【 设计模式介绍,为什么要用设计模式】

设计模式是软件工程中常用的解决特定问题的通用设计方法。它们提供了经过验证的解决方案&#xff0c;可用于解决在软件开发过程中经常遇到的一些常见问题。设计模式不是一种具体的编程语言特性或语法&#xff0c;而是一种通用的设计思想或模板&#xff0c;可以帮助开发人员设计…...

【Web】关于jQuery萌新必须要知道的那些基础知识

目录 DOM对象和jQuery包装集对象 jQuery选择器 jQuery操作元素的属性&#xff0c;样式&#xff0c;内容 jQuery创建元素和添加元素&#xff0c;删除元素和遍历元素 jQuery-ready加载事件 jQuery绑定事件 jQuery中ajax的使用 DOM对象和jQuery包装集对象 DOM对象&#xf…...

第 1 章 微信小程序与云开发从入门到实践从零开始做小程序——开发认识微信小程序

小北的参考工具书 小程序开发的图书并不少&#xff0c;这本书仍然值得你拥有&#xff01; 首先&#xff0c;这是一本全栈小程序开发教程&#xff0c;循序渐进&#xff0c;由浅入深&#xff0c;介绍了小程序开发你想了解的方方面面&#xff0c;包括近其小程序开发的各种新技术应…...

数据隐私安全趋势

在当今社交媒体和开源开发的世界中&#xff0c;共享似乎已成为社会常态。毕竟&#xff0c;我们都被教导分享就是关怀。这不仅适用于个人&#xff0c;也适用于公司&#xff1a;无论是有意在社交媒体帐户和公司网站上&#xff0c;还是无意中通过员工的行为&#xff0c;公司可能会…...

学习磁盘管理

文章目录 一、磁盘接口类型二、磁盘设备的命名三、fdisk分区四、自动挂载五、扩容swap六、GPT分区七、逻辑卷管理八、磁盘配额九、RAID十、软硬链接 一、磁盘接口类型 IDE、SATA、SCSI、SAS、FC&#xff08;光纤通道&#xff09; IDE, 该接口是并口。SATA, 该接口是串口。SCS…...

C语言从入门到精通(一) - C语言开发神器CLion

clion安装配置 下载安装 下载 安装 运行clion clion设置 配置快捷键 配置快捷键为eclipse模式 [可以选择自己喜欢的快捷键模式] 添加cygwin编译器 下载cygwin Cygwin Installation Cygwin是一个在windows平台上运行的类UNIX模拟环境&#xff0c;是Cygnus Solutions公司开发的…...

【办公类-16-10-02】“2023下学期 6个中班 自主游戏观察记录(python 排班表系列)

背景需求&#xff1a; 已经制作了本学期的中4班自主游戏观察记录表 【办公类-16-10-01】“2023下学期 中4班 自主游戏观察记录&#xff08;python 排班表系列&#xff09;-CSDN博客文章浏览阅读398次&#xff0c;点赞10次&#xff0c;收藏3次。【办公类-16-10-01】“2023下学…...

SpringBooot之RestTemplate接口返回多层泛型导致java.util.LinkedHashMap cannot be cast to异常

统一泛型返回对象 Data public class Res<T> implements Serializable {private static final long serialVersionUID 6558796578827818466L;private Integer code; //状态码private String msg; //返回消息private T data; //数据 }data里包裹的泛型对象假设是DZPJ D…...

【新三板年报文本分析】第二辑:从pdf链接的列表中批量下载年报文件

第一辑中已经获取了新三板年报的pdf链接&#xff0c;使用request库进行批量下载。 send_headers为requests的headers&#xff0c;不需要做变动。 在for循环中读取每一行数据的链接数据&#xff0c;创建一个空pdf&#xff0c;将链接指向的pdf文件写入空pdf文件。 for循环内容…...

Jessibuca 插件播放直播流视频

jessibuca官网&#xff1a;http://jessibuca.monibuca.com/player.html git地址&#xff1a;https://gitee.com/huangz2350_admin/jessibuca#https://gitee.com/link?targethttp%3A%2F%2Fjessibuca.monibuca.com%2F 项目需要的文件 1.播放组件 <template ><div i…...

【Docker】03 容器操作

文章目录 一、流转图二、基本操作2.1 查看本地容器进程2.2 启动容器2.2.1 交互式启动容器2.2.2 后台启动容器 2.3 进入容器2.4 停止启动重启容器2.5 退出容器2.6 删除容器2.7 提交容器&#xff08;打包成镜像&#xff09;2.8 拷贝文件2.8.1 拷贝容器内文件到宿主机2.8.2 拷贝宿…...

【HarmonyOS】鸿蒙开发之Stage模型-基本概念——第4.1章

Stage模型-基本概念 名词解释 AbilityStage:应用组件的“舞台“ UIAbility:包含UI界面的应用组件&#xff0c;是系统调度的基本单元 WindowStage:组件内窗口的“舞台“ Window&#xff1a;用来绘制UI页面的窗口 HAP:Harmony Ability Package(鸿蒙能力类型的包) HSP:Harmony Sh…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

【C++特殊工具与技术】优化内存分配(一):C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

xmind转换为markdown

文章目录 解锁思维导图新姿势&#xff1a;将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件&#xff08;ZIP处理&#xff09;2.解析JSON数据结构3&#xff1a;递归转换树形结构4&#xff1a;Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...

边缘计算网关提升水产养殖尾水处理的远程运维效率

一、项目背景 随着水产养殖行业的快速发展&#xff0c;养殖尾水的处理成为了一个亟待解决的环保问题。传统的尾水处理方式不仅效率低下&#xff0c;而且难以实现精准监控和管理。为了提升尾水处理的效果和效率&#xff0c;同时降低人力成本&#xff0c;某大型水产养殖企业决定…...

自定义线程池1.2

自定义线程池 1.2 1. 简介 上次我们实现了 1.1 版本&#xff0c;将线程池中的线程数量交给使用者决定&#xff0c;并且将线程的创建延迟到任务提交的时候&#xff0c;在本文中我们将对这个版本进行如下的优化&#xff1a; 在新建线程时交给线程一个任务。让线程在某种情况下…...

性能优化中,多面体模型基本原理

1&#xff09;多面体编译技术是一种基于多面体模型的程序分析和优化技术&#xff0c;它将程序 中的语句实例、访问关系、依赖关系和调度等信息映射到多维空间中的几何对 象&#xff0c;通过对这些几何对象进行几何操作和线性代数计算来进行程序的分析和优 化。 其中&#xff0…...