【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类名-->
    <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>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

深度学习 精选笔记（3）线性神经网络-线性回归

深度学习 精选笔记（3）线性神经网络-线性回归

学习参考&#xff1a; 动手学深度学习2.0Deep-Learning-with-TensorFlow-bookpytorchlightning ①如有冒犯、请联系侵删。 ②已写完的笔记文章会不定时一直修订修改(删、改、增)&#xff0c;以达到集多方教程的精华于一文的目的。 ③非常推荐上面&#xff08;学习参考&#x…
阅读更多...
spring boot 集成科大讯飞星火认知大模型

spring boot 集成科大讯飞星火认知大模型

首先到官网https://console.xfyun.cn/services/aidoc申请key 一、安装依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance&…
阅读更多...
记录 | docker权限原因导致service ssh start失败

记录 | docker权限原因导致service ssh start失败

【报错】 容器内启 ssh server 报错 有两个错&#xff1a; &#xff08;1&#xff09;/etc/ssh/sshd_host_rsa_key 权限太高&#xff1b; &#xff08;2&#xff09;/run/sshd用户组不为 root 解决方法&#xff1a; 方法一&#xff1a; 各自容器内对/etc/ssh/sshd_host_r…
阅读更多...
41.仿简道云公式函数实战-数学函数-SUMIF

41.仿简道云公式函数实战-数学函数-SUMIF

1. SUMIF函数 SUMIF 函数可用于计算子表单中满足某一条件的数字相加并返回和。 2. 函数用法 SUMIF(range, criteria, [sum_range]) 其中各参数的含义及使用方法如下&#xff1a; range&#xff1a;必需&#xff1b;根据 criteria 的条件规则进行检测的判断字段。支持的字段…
阅读更多...
Spring篇----第九篇

Spring篇----第九篇

系列文章目录 文章目录 系列文章目录前言一、@Qualifier 注解有什么用？二、@RequestMapping 注解有什么用？三、spring DAO 有什么用？四、列举 Spring DAO 抛出的异常。前言 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到…
阅读更多...
精益思维引领AI创新浪潮：从理念到实践的蜕变！

精益思维引领AI创新浪潮：从理念到实践的蜕变！

在人工智能&#xff08;AI&#xff09;飞速发展的今天&#xff0c;精益思维作为一种追求卓越、持续改进的管理哲学&#xff0c;正逐渐成为推动AI创新的重要动力。本文&#xff0c;天行健咨询将探讨精益思维如何与AI创新相结合&#xff0c;以及这种结合如何推动科技进步和社会发…
阅读更多...
JetBrains系列工具，配置PlantUML绘图

JetBrains系列工具，配置PlantUML绘图

PlantUML是一个很强大的绘图工具&#xff0c;各种图都可以绘制&#xff0c;具体的可以去官网看看&#xff0c;或者百度。 PlantUML简述 https://plantuml.com/zh/ PlantUML语言参考指引 https://plantuml.com/zh/guide PlantUML语言是依赖Graphviz进行解析的。Graphviz是开源…
阅读更多...
每日一题 2867统计树中的合法路径

每日一题 2867统计树中的合法路径

2867. 统计树中的合法路径数目 题目描述&#xff1a; 给你一棵 n 个节点的无向树&#xff0c;节点编号为 1 到 n 。给你一个整数 n 和一个长度为 n - 1 的二维整数数组 edges &#xff0c;其中 edges[i] [ui, vi] 表示节点 ui 和 vi 在树中有一条边。 请你返回树中的 合法路…
阅读更多...
【Linux深入剖析】进程优先级 | 命令行参数 | 环境变量

【Linux深入剖析】进程优先级 | 命令行参数 | 环境变量

&#x1f4d9; 作者简介 &#xff1a;RO-BERRY &#x1f4d7; 学习方向&#xff1a;致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f4d2; 日后方向 : 偏向于CPP开发以及大数据方向&#xff0c;欢迎各位关注&#xff0c;谢谢各位的支持 目录 1.进程优先级2.Linux…
阅读更多...
hot100刷题记录-哈希

hot100刷题记录-哈希

一、两数之和 题目&#xff1a;https://leetcode.cn/problems/two-sum/description/?envTypestudy-plan-v2&envIdtop-100-liked 方法1&#xff1a;枚举 class Solution:def twoSum(self, nums: List[int], target: int) -> List[int]:for id, num in enumerate(nums)…
阅读更多...
jmeter 按线程数阶梯式压测数据库

jmeter 按线程数阶梯式压测数据库

当前版本&#xff1a; jmeter 5.6.3mysql 5.7.39 简介 JMeter 通过 bzm - Concurrency Thread Group 来实现阶梯式压测&#xff0c;它并不是JMeter的官方插件&#xff0c;而是一种由Blazemeter提供的高级线程组插件。可以在不同的时间内并发执行不同数量的线程&#xff0c;模拟…
阅读更多...
相册图片怎么压缩？3种方法教你压缩图片

相册图片怎么压缩？3种方法教你压缩图片

相册图片怎么压缩&#xff1f;相册图片压缩在日常生活中扮演着至关重要的角色。它不仅能够帮助我们节省手机或电脑的存储空间&#xff0c;避免设备因存储空间不足而运行缓慢&#xff0c;还能显著减少图片在上传、下载或分享时的时间。此外&#xff0c;压缩图片还能在一定程度上…
阅读更多...
[算法沉淀记录] 排序算法 —— 选择排序

[算法沉淀记录] 排序算法 —— 选择排序

排序算法 —— 选择排序 基本概念 选择排序是一种简单的排序算法&#xff0c;它的工作原理是每次从待排序的列表中选择最小&#xff08;或最大&#xff09;的元素&#xff0c;将其与列表中的第一个位置交换&#xff0c;然后继续对剩余的元素进行排序&#xff0c;直到整个列表…
阅读更多...
【Java程序员面试专栏 算法思维】四 高频面试算法题：回溯算法

【Java程序员面试专栏 算法思维】四 高频面试算法题：回溯算法

一轮的算法训练完成后，对相关的题目有了一个初步理解了，接下来进行专题训练，以下这些题目就是汇总的高频题目，本篇主要聊聊回溯算法，主要就是排列组合问题，所以放到一篇Blog中集中练习 题目关键字解题思路时间空间岛屿数量网格搜索分别向上下左右四个方向探索，遇到海洋…
阅读更多...
R绘图 | 单列数据的分布图，对A变量分bin求B变量的平均值

R绘图 | 单列数据的分布图，对A变量分bin求B变量的平均值

问题1&#xff1a;单个向量的 density 分布图&#xff1f; (1) 模拟数据 set.seed(202402) datdiamonds[sample(nrow(diamonds), 1000),]> head(dat) # A tibble: 6 10carat cut color clarity depth table price x y z<dbl> <ord> &l…
阅读更多...
迎元宵，守平安 |《一颗汤圆的历险记》

迎元宵，守平安 |《一颗汤圆的历险记》

阅读更多...
数据可视化引领智慧仓储新时代

数据可视化引领智慧仓储新时代

随着科技的飞速发展&#xff0c;数据可视化已然成为智慧仓储领域的璀璨明珠&#xff0c;其强大的功能和多面的作用让智慧仓储焕发出勃勃生机。让我们一同探索&#xff0c;数据可视化究竟在智慧仓储中起到了怎样的作用。下面我就以可视化从业者的角度来简单谈谈这个话题。 在这…
阅读更多...
Linux——进程概念

Linux——进程概念

目录 冯诺依曼体系结构 操作系统 管理 系统调用和库函数 进程的概念 进程控制块——PCB 查看进程 通过系统调用获取进程标示符 通过系统调用创建进程 进程状态 运行状态-R ​编辑 浅度睡眠状态-S 深度睡眠状态-D 暂停状态-T 死亡状态-X 僵尸状态-Z 僵尸进程…
阅读更多...
详解顺序结构滑动窗口处理算法

详解顺序结构滑动窗口处理算法

&#x1f380;个人主页&#xff1a; https://zhangxiaoshu.blog.csdn.net &#x1f4e2;欢迎大家&#xff1a;关注&#x1f50d;点赞&#x1f44d;评论&#x1f4dd;收藏⭐️&#xff0c;如有错误敬请指正! &#x1f495;未来很长&#xff0c;值得我们全力奔赴更美好的生活&…
阅读更多...
WPF 附加属性+控件模板，完成自定义控件。建议观看HandyControl源码

WPF 附加属性+控件模板，完成自定义控件。建议观看HandyControl源码

文章目录 相关连接前言需要实现的效果附加属性添加附加属性&#xff0c;以Test修改FontSize为例依赖属性使用触发器使用直接操控 结论 控件模板&#xff0c;在HandyControl的基础上面进行修改参考HandyControl的源码控件模板原型控件模板 控件模板触发器完整样式简单使用 结论 …
阅读更多...
最新文章

Copyright @ 2022~2023