【Vue3】插槽使用和animate使用

news/2024/7/10 1:10:09 标签: 前端, vue

插槽使用

      • 插槽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包裹的内容，可以给他们添加，删除，初始化增加动画效果
  • 不同于 ， 会以一个真实元素呈现：默认为一个 （我们可以通过 tag 特性更换为其他元素。）
<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>

在这里插入图片描述

示例展示

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  • 引入lodash

  • npm install lodash -S

  • 页面引入

  • import _ from ‘lodash’;

  • 发现报错
    在这里插入图片描述

  • 解决报错

  • 安装声明文件： npm install @types/lodash -D

  • 然后重启一下

代码展示
<template>
  <div class="main">
    <button @click="changeTab">千变万化</button>
    <div class="all">
      <transition-group move-class="start">
        <div v-for="item in list" :key="item.id" class="bar">
          {{ item.number }}
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import _ from 'lodash';
let list = ref(
  Array.apply(null, { length: 81 }).map((_, index) => {
    return {
      id: index,
      number: (index % 9) + 1,
    };
  })
);
const changeTab = () => {
  list.value = _.shuffle(list.value);
};
</script>

<style scoped lang="less">
.all {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
}
.bar {
  border: 1px solid #f0f0f0;
  padding: 4px;
}
.start {
  transition: all 1s;
}
</style>
  • 注意的是all样式想加在transition-group上，必须添加tag=’div‘
    在这里插入图片描述

http://www.niftyadmin.cn/n/5396591.html

相关文章

探索AI视频模型的无限可能：OpenAI的Sora引领创新浪潮

探索AI视频模型的无限可能：OpenAI的Sora引领创新浪潮

文章目录 &#x1f4d1;前言一、技术解析二、应用场景三、未来展望四、伦理与创意五、用户体验与互动&#x1f324;️总结 &#x1f4d1;前言 随着人工智能技术的蓬勃发展&#xff0c;AI视频模型正逐渐成为科技领域的新宠。在这个变革的浪潮中&#xff0c;OpenAI推出的首个AI视…
阅读更多...
Android日历提醒增删改查事件、添加天数不对问题

Android日历提醒增删改查事件、添加天数不对问题

Android日历提醒是非常好的提醒功能&#xff0c;笔者在做的过程中&#xff0c;遇到的一些问题&#xff0c;现整理出来&#xff0c;以供参考。 一、申请日历的读写权限 <uses-permission android:name"android.permission.WRITE_CALENDAR" /> <uses-permiss…
阅读更多...
设计模式-代理模式(静态代理,动态代理)

设计模式-代理模式(静态代理,动态代理)

定义 代理模式Proxy是⼀种结构型设计模式&#xff0c;能够增强一些功能&#xff0c;不会影响到之前核心功能的流程。 结构图 1 通过实现接口的方式 2 通过继承类的方式 代理模式与装饰器模式 IT老齐白话设计模式 装饰和代理有着相似的结构&#xff0c; 但是其意图却⾮常…
阅读更多...
pytorch张量创建、张量复制

pytorch张量创建、张量复制

pytorch张量创建、张量复制 首先注意一点&#xff1a;在torch中&#xff0c;可导张量计算出的新张量也是可导的&#xff0c;新张量与原张量具有可导连接&#xff0c;那么原张量就不是叶子张量&#xff0c;新张量成了叶子张量。 创建方式一&#xff1a;torch.tensor() torch.…
阅读更多...
Premiere水墨风格婚纱照片婚礼视频模板|PR婚庆后期剪辑模板

Premiere水墨风格婚纱照片婚礼视频模板|PR婚庆后期剪辑模板

时尚大气水墨风格婚纱照片展示&#xff0c;婚礼视频制作PR模板&#xff0c;婚庆后期剪辑模板MOGRT。 主要特点&#xff1a;高清&#xff08;19201080&#xff09;分辨率/30帧/秒&#xff0c;Premiere Pro 2022或更高版本软件&#xff0c;易于定制&#xff0c;持续时间00:50秒&a…
阅读更多...
四、ChatGPT的回答从哪里来？—我耀学IT

四、ChatGPT的回答从哪里来？—我耀学IT

ChatGPT回答问题时通常比问题本身更长&#xff0c;这是因为它需要通过补充额外的信息来提供完整的答案。它的回答来源于对现有信息的抽取和整合&#xff0c;那么具体是怎么进行抽取和整合的呢&#xff0c;下面我们带着这个疑问来详细讨论一下它的工作原理。首先&#xff0c;英语…
阅读更多...
C#学习 part1 初窥C#

C#学习 part1 初窥C#

初窥C# C#简介&环境、安装C#程序结构C#基本语法参考 C#简介&环境、安装 C#是一个现代的、通用的、面向对象的编程语言。 其专为公共语言基础结构(CLI) 。CLI由可执行代码和运行时环境组成&#xff0c;允许在不同的计算机平台和体系结构上使用各种高级语言。 环境 C#是…
阅读更多...
ant design vue2 下拉框select单选选中项加标识

ant design vue2 下拉框select单选选中项加标识

最近工作中遇到客户需要在单选的下拉框中对所选项进行标识&#xff1a; 组件在设置为多选时&#xff0c;是可以对选中项进行标识&#xff0c;但是单选没有这个功能&#xff0c;如下&#xff1a; a-select 加入mode为tags 和 multiple 模式下可用&#xff0c;那如何实现单选也能…
阅读更多...
最新文章

Copyright @ 2022~2023