【Vue3】插槽使用和animate使用

news2024/11/24 10:43:36

插槽使用

      • 插槽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类名-->
    <transition
      name="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">
    <transition
      appear
      appear-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-group
      appear
      appear-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>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

pytest-配置项目不同环境URL

pytest-配置项目不同环境URL

pytest自动化中&#xff0c;在不同环境进行测试&#xff0c;可以将项目中的url单独抽取出来&#xff0c;通过pytest.ini配置文件实现&#xff08;类似postman中的“Environments”&#xff09; 使用步骤&#xff1a; 1&#xff09;安装pytest-base-url插件 pytest-base-url …
阅读更多...
【Flink精讲】Flink状态及Checkpoint调优

【Flink精讲】Flink状态及Checkpoint调优

RocksDB大状态调优 RocksDB 是基于 LSM Tree 实现的&#xff08;类似 HBase&#xff09; &#xff0c;写数据都是先缓存到内存中&#xff0c; 所以 RocksDB 的写请求效率比较高。 RocksDB 使用内存结合磁盘的方式来存储数据&#xff0c;每 次获取数据时&#xff0c;先从内存中 …
阅读更多...
Mac下载安装配置运行MySQL

Mac下载安装配置运行MySQL

一、打开官网 MySQL :: Download MySQL Community Serverhttps://dev.mysql.com/downloads/mysql/ 1、根据自己的电脑版本下载相对应的MySQL版本&#xff0c;Mac分为ARM和X86两个不同的架构 ​ 不知道自己电脑是ARM还是X86的&#xff0c;如下操作进行查询 uname -a 我的电脑是…
阅读更多...
2024年Apache DolphinScheduler RoadMap：引领开源调度系统的未来

2024年Apache DolphinScheduler RoadMap：引领开源调度系统的未来

非常欢迎大家来到Apache DolphinScheduler社区&#xff01;随着开源技术在全球范围内的快速发展&#xff0c;社区的贡献者 “同仁” 一直致力于构建一个强大而活跃的开源调度系统社区&#xff0c;为用户提供高效、可靠的任务调度和工作流管理解决方案。 在过去的一段时间里&…
阅读更多...
代码随想录|学习工具分享

代码随想录|学习工具分享

工具分享 画图 https://excalidraw.com/ 大家平时刷题可以用这个网站画草稿图帮助理解&#xff01;如果看题解很蒙或者思路不清晰的时候&#xff0c;跟着程序处理流程画一个图&#xff0c;90%的情况下都可以解决问题&#xff01; 数据结构可视化 https://www.cs.usfca.edu/…
阅读更多...
【Java设计模式】一、工厂模式、建造者模式、原型设计模式

【Java设计模式】一、工厂模式、建造者模式、原型设计模式

文章目录 1、简单工厂模式2、工厂方法模式3、抽象工厂模式4、建造者模式5、原型设计模式 设计模式即总结出来的一些最佳实现。23种设计模式可分为三大类&#xff1a; 创建型模式&#xff1a;隐藏了创建对象的过程&#xff0c;通过逻辑方法进行创建对象&#xff0c;而不是直接n…
阅读更多...
逆序或者正序打印一个数的每一位数，递归实现（C语言）

逆序或者正序打印一个数的每一位数，递归实现（C语言）

从键盘上输入一个不多于5位&#xff08;包括5位&#xff09;的正整数&#xff0c;要求 &#xff08;1&#xff09;求出它是几位数&#xff1b;&#xff08;2&#xff09;分别输出每一位数字&#xff08;3&#xff09;按逆序输出各位数字 &#xff08;1&#xff09;求出它是几位…
阅读更多...
Linux浅学笔记04

Linux浅学笔记04

目录 Linux实用操作 Linux系统下载软件 yum命令 apt systemctl命令 ln命令 日期和时区 IP地址 主机名 网络传输-下载和网络请求 ping命令 wget命令 curl命令 网络传输-端口 进程 ps 命令 关闭进程命令&#xff1a; 主机状态监控命令 磁盘信息监控&#xff1a…
阅读更多...
【MQ05】异常消息处理

【MQ05】异常消息处理

异常消息处理 上节课我们已经学习到了消息的持久化和确认相关的内容。但是&#xff0c;光有这些还不行&#xff0c;如果我们的消费者出现问题了&#xff0c;无法确认&#xff0c;或者直接报错产生异常了&#xff0c;这些消息要怎么处理呢&#xff1f;直接丢弃&#xff1f;这就是…
阅读更多...
深入理解计算机系统学习笔记

深入理解计算机系统学习笔记

第三章 程序的机器级表示 3.2.1 机器级代码 对于机器级编程来说&#xff0c;其中两种抽象尤为重要。第一种是由捍令集体系结构或指令集架构&#xff08;Instruction Set Architecture, ISA)来定义机器级程序的 格式和行为&#xff0c;它定义了处理器状态、指令的格式&#xf…
阅读更多...
在Ubuntu上为ARM 8处理器安装Python 3.10.4虚拟环境指南

在Ubuntu上为ARM 8处理器安装Python 3.10.4虚拟环境指南

在Ubuntu上为ARM 8处理器安装Python 3.10.4虚拟环境指南 安装Anaconda或Miniconda&#xff1a; 首先&#xff0c;您需要从官方网站下载适用于ARM架构的Anaconda或Miniconda安装包。下载完成后&#xff0c;在终端中使用bash Anaconda3-2019.10-Linux-armv8.sh&#xff08;文件…
阅读更多...
将仓库A中的部分提交迁移到仓库B中

将仓库A中的部分提交迁移到仓库B中

结论&#xff1a; 使用git format-patchgit am即可实现 使用场景&#xff1a; 例如仓库A这里有5个提交记录&#xff0c;commitid1, commitid2, commitid3, commitid4&#xff0c;commitid5 仓库B想用仓库A中提交的代码&#xff0c;手动改比较慢&#xff0c;当改动较多的时候…
阅读更多...
2.26 Qt day4+5 纯净窗口移动+绘画事件+Qt实现TCP连接服务+Qt实现连接数据库

2.26 Qt day4+5 纯净窗口移动+绘画事件+Qt实现TCP连接服务+Qt实现连接数据库

思维导图 Qt实现TCP连接 服务器端&#xff1a; widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QTcpServer>//服务器端类 #include<QTcpSocket>//客户端类 #include<QMessageBox>//消息对话框类 #include<QList>//链…
阅读更多...
2024-02-26（Spark，kafka）

2024-02-26（Spark，kafka）

1.Spark SQL是Spark的一个模块&#xff0c;用于处理海量结构化数据 限定&#xff1a;结构化数据处理 RDD的数据开发中&#xff0c;结构化&#xff0c;非结构化&#xff0c;半结构化数据都能处理。 2.为什么要学习SparkSQL SparkSQL是非常成熟的海量结构化数据处理框架。 学…
阅读更多...
实践航拍小目标检测，基于轻量级YOLOv8n开发构建无人机航拍场景下的小目标检测识别分析系统

实践航拍小目标检测，基于轻量级YOLOv8n开发构建无人机航拍场景下的小目标检测识别分析系统

关于无人机相关的场景在我们之前的博文也有一些比较早期的实践&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a; 《deepLabV3Plus实现无人机航拍目标分割识别系统》 《基于目标检测的无人机航拍场景下小目标检测实践》 《助力环保河道水质监测&#xff0c;基于yolov…
阅读更多...
掌握ChatGPT润色绝技：什么是人工智能写作以及如何使用它来完成写作任务

掌握ChatGPT润色绝技：什么是人工智能写作以及如何使用它来完成写作任务

如对AI写论文感兴趣&#xff0c;欢迎添加作者wx讨论 : ryan_2982 人工智能 (AI) 的出现开创了技术进步的新时代&#xff0c;彻底改变了包括写作和内容创作在内的各个行业。人工智能写作和人工智能提示已成为可以简化和增强写作任务的强大工具。在这篇博文中&#xff0c;我们将…
阅读更多...
C++多线程学习09：并发队列

C++多线程学习09：并发队列

参考 链接&#xff1a;恋恋风辰官方博客 并发队列&线程安全栈 代码结构&#xff1a; 并发队列ThreadSafeQueue.h&#xff1a; #pragma once#include <mutex> #include <queue>template<typename T> class threadsafe_queue { private:mutable std::m…
阅读更多...
深入理解Python中的JSON模块：基础大总结与实战代码解析【第102篇—JSON模块】

深入理解Python中的JSON模块：基础大总结与实战代码解析【第102篇—JSON模块】

深入理解Python中的JSON模块&#xff1a;基础大总结与实战代码解析 在Python中&#xff0c;JSON&#xff08;JavaScript Object Notation&#xff09;模块是处理JSON数据的重要工具之一。JSON是一种轻量级的数据交换格式&#xff0c;广泛应用于Web开发、API通信等领域。本文将…
阅读更多...
linux操作系统期末练习题

linux操作系统期末练习题

背景&#xff1a; 一、远程登录 1&#xff0e;利用远程登录软件&#xff0c;以用户userManager(密码123456)&#xff0c;远程登录教师计算机&#xff08;考试现场给出IP地址&#xff09;&#xff0c;只有操作&#xff0c;没有命令。 2&#xff0e;以stu班级学生个人学号后3位…
阅读更多...
goland配置新增文件头

goland配置新增文件头

参考&#xff1a; goland函数注释生成插件 goland函数注释生成插件_goland自动加函数说明-CSDN博客 GoLand 快速添加方法注释 GoLand 快速添加方法注释_goland批量注释-CSDN博客 goland 如何设置头注释&#xff0c;自定义author和data goland 如何设置头注释&#xff0c;自定…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023