vue3-内置组件-Transition

基于状态变化的过渡和动画（常用）

建议多看几遍~~。然后动手去写写，学编程只有多动手才能有感觉。

内置组件:

它在任意别的组件中都可以被使用，无需注册。

Vue 提供了两个内置组件，可以帮助你制作基于状态变化的过渡和动画：

<Transition> 会在一个元素或组件进入和离开 DOM 时应用动画。本章节会介绍如何使用它。

<TransitionGroup> 会在一个 v-for 列表中的元素或组件被插入，移动，或移除时应用动画

Transition

进入或者离开的动画

  • 由 v-if 所触发的切换

  • 由 v-show 所触发的切换

  • 由特殊元素 <component> 切换的动态组件

  • 改变特殊的 key 属性

<script lang="ts" setup>
import { ref } from 'vue'

const show = ref(true)
</script>

<template>
  <div class="container">
    <button @click="show = !show">点击切换按钮状态</button>
    <Transition>
      <p v-if="show">hello</p>
    </Transition>
  </div>
</template>

<style lang="scss" scoped>
.container {
  /* 下面我们会解释这些 class 是做什么的 */
  .v-enter-active,
  .v-leave-active {
    transition: opacity 0.5s ease;
  }

  .v-enter-from,
  .v-leave-to {
    opacity: 0;
  }
}
</style>

<Transition> 仅支持单个元素或组件作为其插槽内容。如果内容是一个组件，这个组件必须仅有一个根元素。

当一个 <Transition> 组件中的元素被插入或移除时，会发生下面这些事情：

Vue 会自动检测目标元素是否应用了 CSS 过渡或动画。如果是，则一些 CSS 过渡 class 会在适当的时机被添加和移除。

如果有作为监听器的 JavaScript 钩子，这些钩子函数会在适当时机被调用。

如果没有探测到 CSS 过渡或动画、也没有提供 JavaScript 钩子，那么 DOM 的插入、删除操作将在浏览器的下一个动画帧后执行。

基于 CSS 的过渡效果

v-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。

v-enter-active：进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。

v-enter-to：进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，在过渡或动画完成之后移除。

v-leave-from：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。

v-leave-active：离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。

v-leave-to：离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除。

v-enter-active 和 v-leave-active 给我们提供了为进入和离开动画指定不同速度曲线的能力，我们将在下面的小节中看到一个示例。

为过渡效果命名

我们可以给 Transition 组件传一个 name prop 来声明一个过渡效果名：

<Transition name="fade">
  ...
</Transition>

对于一个有名字的过渡效果，对它起作用的过渡 class 会以其名字而不是 v 作为前缀。比如，上方例子中被应用的 class 将会是 fade-enter-active 而不是 v-enter-active。这个“fade”过渡的 class 应该是这样：

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
CSS 的 transition

  1. Transition 一般都会搭配原生 CSS 过渡一起使用，正如你在上面的例子中所看到的那样。

  2. 这个 transition CSS 属性是一个简写形式，使我们可以一次定义一个过渡的各个方面，包括需要执行动画的属性、持续时间和速度曲线。

使用不同的持续时间和速度曲线来过渡多个属性示例：

<script lang="ts" setup>
import { ref } from 'vue'
const show = ref(true)
</script>

<template>
  <div class="container">
    <button @click="show = !show">点击切换按钮状态</button>
    <Transition name="slide-fade">
      <p v-if="show">持续时间和速度曲线控制</p>
    </Transition>
  </div>
</template>

<style lang="scss" scoped>
.container {
  /*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
  .slide-fade-enter-active {
    transition: all 0.3s ease-out;
  }

  .slide-fade-leave-active {
    transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
  }

  .slide-fade-enter-from,
  .slide-fade-leave-to {
    transform: translateX(20px);
    opacity: 0;
  }
}
</style>

CSS 的 animation

原生 CSS 动画和 CSS transition 的应用方式基本上是相同的，只有一点不同，那就是 *-enter-from 不是在元素插入后立即移除，而是在一个 animationend 事件触发时被移除。

对于大多数的 CSS 动画，我们可以简单地在 _-enter-active 和 _-leave-active class 下声明它们。下面是一个示例：

<script lang="ts" setup>
import { ref } from 'vue'
const show = ref(true)
</script>

<template>
  <div class="container">
    <button @click="show = !show">点击切换状态</button>
    <Transition name="bounce">
      <p v-if="show" style="text-align: center">这是 CSS transition 示例</p>
    </Transition>
  </div>
</template>

<style lang="scss" scoped>
.container {
  text-align: center;
  .bounce-enter-active {
    animation: bounce-in 0.5s;
  }
  .bounce-leave-active {
    animation: bounce-in 0.5s reverse;
  }
  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.25);
    }
    100% {
      transform: scale(1);
    }
  }
}
</style>

自定义过渡 class

你也可以向 <Transition> 传递以下的 props 来指定自定义的过渡 class：

  • enter-from-class

  • enter-active-class

  • enter-to-class

  • leave-from-class

  • leave-active-class

  • leave-to-class 你传入的这些 class 会覆盖相应阶段的默认 class 名。这个功能在你想要在 Vue 的动画机制下集成其他的第三方 CSS 动画库时非常有用，比如 Animate.css：

安装 animate.css 动画库，(已安装的可以忽略)

pnpm install animate.css --save

<!-- 假设你已经在页面中引入了 Animate.css -->
<script lang="ts" setup>
import { ref } from 'vue'
import 'animate.css'
const show = ref(true)
</script>

<template>
  <div class="container">
    <button @click="show = !show">点击切换状态</button>
    <Transition
      name="custom-classes"
      enter-active-class="animate__animated animate__zoomIn "
      leave-active-class="animate__animated animate__zoomOut"
    >
      <p v-if="show">引入animate动画库</p>
    </Transition>
  </div>
</template>

<style lang="scss" scoped>
.container {
  text-align: center;
}
</style>

同时使用 transition 和 animation

Vue 需要附加事件监听器，以便知道过渡何时结束。可以是 transitionend 或 animationend，这取决于你所应用的 CSS 规则。如果你仅仅使用二者的其中之一，Vue 可以自动探测到正确的类型。

然而在某些场景中，你或许想要在同一个元素上同时使用它们两个。举例来说，Vue 触发了一个 CSS 动画，同时鼠标悬停触发另一个 CSS 过渡。此时你需要显式地传入 type prop 来声明，告诉 Vue 需要关心哪种类型，传入的值是 animation 或 transition：

伪代码:

<Transition type="animation">...</Transition>
深层级过渡与显式过渡时长

尽管过渡 class 仅能应用在 <Transition> 的直接子元素上，我们还是可以使用深层级的 CSS 选择器，在深层级的元素上触发过渡效果。

<Transition name="nested">
  <div v-if="show" class="outer">
    <div class="inner">
      Hello
    </div>
  </div>
</Transition>

/* 应用于嵌套元素的规则 */
.nested-enter-active .inner,
.nested-leave-active .inner {
  transition: all 0.3s ease-in-out;
}

.nested-enter-from .inner,
.nested-leave-to .inner {
  transform: translateX(30px);
  opacity: 0;
}

/* ... 省略了其他必要的 CSS */

我们甚至可以在深层元素上添加一个过渡延迟，从而创建一个带渐进延迟的动画序列：

/* 延迟嵌套元素的进入以获得交错效果 */
.nested-enter-active .inner {
  transition-delay: 0.25s;
}

然而，这会带来一个小问题。默认情况下，<Transition> 组件会通过监听过渡根元素上的第一个 transitionend 或者 animationend 事件来尝试自动判断过渡何时结束。而在嵌套的过渡中，期望的行为应该是等待所有内部元素的过渡完成。

在这种情况下，你可以通过向 <Transition> 组件传入 duration prop 来显式指定过渡的持续时间 (以毫秒为单位)。总持续时间应该匹配延迟加上内部元素的过渡持续时间：

<Transition :duration="550">...</Transition>

如果有必要的话，你也可以用对象的形式传入，分开指定进入和离开所需的时间：

<Transition :duration="550">...</Transition>
性能考量

你可能注意到我们上面例子中展示的动画所用到的 CSS 属性大多是 transform 和 opacity 之类的。用这些属性制作动画非常高效，因为：

他们在动画过程中不会影响到 DOM 结构，因此不会每一帧都触发昂贵的 CSS 布局重新计算。

大多数的现代浏览器都可以在执行 transform 动画时利用 GPU 进行硬件加速。

相比之下，_像 height 或者 margin 这样的属性会触发 CSS 布局变动_，因此执行它们的动画效果更昂贵，需要谨慎使用。我们可以在 CSS-Triggers（https://csstriggers.com/） 这类的网站查询哪些属性会在执行动画时触发 CSS 布局变动。

JavaScript 钩子

你可以通过监听 <Transition> 组件事件的方式在过渡过程中挂上钩子函数：

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @enter-cancelled="onEnterCancelled"
  @before-leave="onBeforeLeave"
  @leave="onLeave"
  @after-leave="onAfterLeave"
  @leave-cancelled="onLeaveCancelled"
>
  <!-- ... -->
</Transition>

// 在元素被插入到 DOM 之前被调用
// 用这个来设置元素的 "enter-from" 状态
function onBeforeEnter(el) {}

// 在元素被插入到 DOM 之后的下一帧被调用
// 用这个来开始进入动画
function onEnter(el, done) {
  // 调用回调函数 done 表示过渡结束
  // 如果与 CSS 结合使用，则这个回调是可选参数
  done()
}

// 当进入过渡完成时调用。
function onAfterEnter(el) {}

// 当进入过渡在完成之前被取消时调用
function onEnterCancelled(el) {}

// 在 leave 钩子之前调用
// 大多数时候，你应该只会用到 leave 钩子
function onBeforeLeave(el) {}

// 在离开过渡开始时调用
// 用这个来开始离开动画
function onLeave(el, done) {
  // 调用回调函数 done 表示过渡结束
  // 如果与 CSS 结合使用，则这个回调是可选参数
  done()
}

// 在离开过渡完成、
// 且元素已从 DOM 中移除时调用
function onAfterLeave(el) {}

// 仅在 v-show 过渡中可用
function onLeaveCancelled(el) {}

这些钩子可以与 CSS 过渡或动画结合使用，也可以单独使用。

在使用仅由 JavaScript 执行的动画时，最好是添加一个 :css="false" prop。这显式地向 Vue 表明可以跳过对 CSS 过渡的自动探测。除了性能稍好一些之外，还可以防止 CSS 规则意外地干扰过渡效果。

<Transition
  ...
  :css="false"
>
  ...
</Transition>

在有了 :css="false" 后，我们就自己全权负责控制什么时候过渡结束了。这种情况下对于 @enter 和 @leave 钩子来说，回调函数 done 就是必须的。否则，钩子将被同步调用，过渡将立即完成。

这里是使用 GreenSock 库(https://gsap.com/)执行动画的一个示例，你也可以使用任何你想要的库，比如 Anime.js (https://animejs.com/) 或者 Motion One(https://motion.dev/)。

可复用过渡效果

得益于 Vue 的组件系统，过渡效果是可以被封装复用的。要创建一个可被复用的过渡，我们需要为 <Transition> 组件创建一个包装组件，并向内传入插槽内容：

<!-- MyTransition.vue -->
<script>
// JavaScript 钩子逻辑...
</script>

<template>
  <!-- 包装内置的 Transition 组件 -->
  <Transition
    name="my-transition"
    @enter="onEnter"
    @leave="onLeave">
    <slot></slot> <!-- 向内传递插槽内容 -->
  </Transition>
</template>

<style>
/*
  必要的 CSS...
  注意：避免在这里使用 <style scoped>
  因为那不会应用到插槽内容上
*/
</style>

现在 MyTransition 可以在导入后像内置组件那样使用了：

<MyTransition>
  <div v-if="show">Hello</div>
</MyTransition>

出现时过渡

如果你想在某个节点初次渲染时应用一个过渡效果，你可以添加 appear prop：

<Transition appear>
  ...
</Transition>

元素间过渡

除了通过 v-if / v-show 切换一个元素，我们也可以通过 v-if / v-else / v-else-if 在几个组件间进行切换，只要确保任一时刻只会有一个元素被渲染即可：

<Transition>
  <button v-if="docState === 'saved'">Edit</button>
  <button v-else-if="docState === 'edited'">Save</button>
  <button v-else-if="docState === 'editing'">Cancel</button>
</Transition>
``

过渡模式

在之前的例子中，进入和离开的元素都是在同时开始动画的，因此我们不得不将它们设为 position: absolute 以避免二者同时存在时出现的布局问题。

然而，很多情况下这可能并不符合需求。我们可能想要先执行离开动画，然后在其完成之后再执行元素的进入动画。手动编排这样的动画是非常复杂的，好在我们可以通过向 <Transition> 传入一个 mode prop 来实现这个行为：

<Transition mode="out-in">
  ...
</Transition>

将之前的例子改为 mode="out-in" 后是这样：

<Transition> 也支持 mode="in-out"，虽然这并不常用。

组件间过渡

<Transition> 也可以作用于动态组件之间的切换：

<Transition name="fade" mode="out-in">
  <component :is="activeComponent"></component>
</Transition>

动态过渡

<Transition> 的 props (比如 name) 也可以是动态的！这让我们可以根据状态变化动态地应用不同类型的过渡：

<Transition :name="transitionName">
  <!-- ... -->
</Transition>

这个特性的用处是可以提前定义好多组 CSS 过渡或动画的 class，然后在它们之间动态切换。

你也可以根据你的组件的当前状态在 JavaScript 过渡钩子中应用不同的行为。最后，创建动态过渡的终极方式还是创建可复用的过渡组件，并让这些组件根据动态的 props 来改变过渡的效果。掌握了这些技巧后，就真的只有你想不到，没有做不到的了。

欢迎关注，后面会有一些资源可以免费获取哟~

分享前后端编程经验，技术干货，技术方案，好用的开发工具和应用软件，人生经验感悟等

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

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

相关文章

AMH面板如何安装与公网远程访问本地面板界面

AMH面板如何安装与公网远程访问本地面板界面

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
Mac版Idea实用快捷键+使用技巧

Mac版Idea实用快捷键+使用技巧

快捷键 全局查找 shift command f 查找类(class) command o 查找classfilesymbolaction 点击两次shift 复制当前行 command d 自动代码提示 option enter 代码格式化 option command l 生成代码(构造函数、Getter/Setter方法、equals方法、hashCode方法、…
阅读更多...
VLM 系列——Llava1.6——论文解读

VLM 系列——Llava1.6——论文解读

一、概述 1、是什么 Llava1.6 是llava1.5 的升级暂时还没有论文等&#xff0c;是一个多模态视觉-文本大语言模型&#xff0c;可以完成&#xff1a;图像描述、视觉问答、根据图片写代码&#xff08;HTML、JS、CSS&#xff09;&#xff0c;潜在可以完成单个目标的视觉定位、名画…
阅读更多...
这一年让我印象深刻的bug --外部接口请求失败问题

这一年让我印象深刻的bug --外部接口请求失败问题

1 业务场景 我们有个需求是外部客户需要在我们系统创建一个账号。业务流程如下 但是我们运行一段时间后发现一个问题&#xff0c;有客户反创建客户账号时&#xff0c;提示账号已经存在&#xff0c;但是我们系统却查不到单号 2 问题分析 经分析报错来源于权限系统&#xff0c;我…
阅读更多...
学习Spring的第十五天

学习Spring的第十五天

spring aop动态代理开发 一、什么是动态代理 动态代理就是&#xff0c;在程序运行期&#xff0c;创建目标对象的代理对象&#xff0c;并对目标对象中的方法进行功能性增强的一种技术。在生成代理对象的过程中&#xff0c;目标对象不变&#xff0c;代理对象中的方法是目标对象…
阅读更多...
基于JavaWeb开发的火车售票系统[附源码]

基于JavaWeb开发的火车售票系统[附源码]

基于JavaWeb开发的火车售票系统[附源码] &#x1f345; 作者主页 央顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; &#x1f345; 查看下方微信号获取联系方式 承接各种定制系统 &#x1f4dd…
阅读更多...
XCTF：3-1[WriteUP]

XCTF：3-1[WriteUP]

从题目中获取文件 使用file命令查看文件类型 修改后缀为.rar后进行解压缩 再次使用file命令查询该文件的类型 再次修改后缀为.pcap或者.pcapng 使用wireshark打开&#xff0c;直接搜索flag字样 在多个数据包里发现了flag.rar、flag.txt等文件 尝试使用http导出文件 有一个fl…
阅读更多...
Sui上TVL突破5亿美元，位列DeFi榜单前十名和最活跃链前五名

Sui上TVL突破5亿美元，位列DeFi榜单前十名和最活跃链前五名

2023年Sui上DeFi协议迅速增长&#xff0c;2024年这一势头仍在继续&#xff0c;根据DeFiLlama报告Sui上TVL近期超过5亿美元。在不到一年的时间里就达到这个金额&#xff0c;得益于Sui的突破性指标&#xff0c;比如其峰值TPS接近6,000。 Sui TVL突破5亿美元&#xff0c;登上DeFi…
阅读更多...
超多制作模板的姓氏头像生成器微信小程序源码

超多制作模板的姓氏头像生成器微信小程序源码

超多制作模板的姓氏头像生成器微信小程序源码&#xff0c;这是一款姓氏头像制作小工具&#xff0c;内含丰富多样的模板提供制作。 以前的基本是固定位置生成&#xff0c;这款制作支持拖拽调整位置&#xff0c;自定义颜色&#xff0c;阴影等等。
阅读更多...
第三百零八回

第三百零八回

文章目录 1. 概念介绍2. 实现方法2.1 文字信息2.2 红色边框 3. 示例代码4. 内容总结 我们在上一章回中介绍了"如何实现密码输入框"相关的内容&#xff0c;本章回中将介绍如何在在输入框中提示错误.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们…
阅读更多...
【 buuctf-另外一个世界】

【 buuctf-另外一个世界】

flag 就隐藏在这一串二进制数中&#xff0c;可以利用在线工具转换得到 flag&#xff0c;本次讲一下用代码怎么转换。将二进制数转换成 ascii 字母&#xff0c;手写的话两种思路&#xff1a; 1.将二进制数四位一组先转成十六进制数&#xff0c;再将十六进制数两位一组&#xff…
阅读更多...
L1-023 输出GPLT-java

L1-023 输出GPLT-java

输入样例&#xff1a; pcTclnGloRgLrtLhgljkLhGFauPewSKgt输出样例&#xff1a; GPLTGPLTGLTGLGLL 思路 设置一个GPLT的计数器 然后遍历的时候每次对计数器的个数减一 import java.io.*;public class Main {public static void main(String[] args) throws IOException {B…
阅读更多...
ele-h5项目使用vue3+vite+vant4开发：第三节、自定义hooks-useToggle实现搜索页展示切换

ele-h5项目使用vue3+vite+vant4开发：第三节、自定义hooks-useToggle实现搜索页展示切换

需求分析 点击首页搜索框&#xff0c;出现搜索页点击搜索页,隐藏搜索页,展示首页新建搜索页组件实现效果 hooks介绍 理解 hooks 就是将去改变一个参数值时&#xff0c;页面也会更新对应的值的想法、抽象&#xff0c;用代码实现的地方 如何实现一个hooks 在src&#xff08;sour…
阅读更多...
c++阶梯之类与对象（中）

c++阶梯之类与对象（中）

目录 1.类的6个默认成员函数 2. 构造函数 2.1 构造函数概念的引出 2.2 构造函数的特性 3. 析构函数 3.1 析构函数的概念 3.2 特性 未使用构造与析构的版本 使用了构造与析构函数的版本 4. 拷贝构造函数 4.1 拷贝构造函数的概念 4.2 特性 结语 本节我们来认识…
阅读更多...
Vue中keep-alive的作用、原理及应用场景

Vue中keep-alive的作用、原理及应用场景

在进行Vue开发的过程中&#xff0c;我们经常会遇到需要进行组件缓存的场景&#xff0c;这时候Vue提供的keep-alive组件就派上了用场。keep-alive组件是Vue内置的一个抽象组件&#xff0c;它可以将其包裹的组件进行缓存&#xff0c;提高组件的性能&#xff0c;同时也可以节省服务…
阅读更多...
Python学习路线 - Python高阶技巧 - 拓展

Python学习路线 - Python高阶技巧 - 拓展

Python学习路线 - Python高阶技巧 - 拓展 闭包闭包注意事项 装饰器装饰器的一般写法(闭包写法)装饰器的语法糖写法 设计模式单例模式工厂模式 多线程进程、线程并行执行多线程编程threading模块 网络编程Socket客户端和服务端Socket服务端编程实现服务端并结合客户端进行测试 S…
阅读更多...
使用Java实现HTTP持久连接：一次与网络的“长聊“

使用Java实现HTTP持久连接：一次与网络的“长聊“

大家都知道&#xff0c;传统的HTTP连接就像是一次性的餐具&#xff0c;每发送一个请求&#xff0c;就得重新建立一个连接&#xff0c;然后快速用完就扔。这对于网络资源来说&#xff0c;简直就是一场"大肆挥霍"的派对。但幸好&#xff0c;我们有HTTP持久连接&#xf…
阅读更多...
【字符串】字典树

【字符串】字典树

字典树就是利用一个这样的树状结构&#xff0c;可以记录字符串有没有出现过 放个板子 int nxt[100000][26], cnt; bool st[100000]; // 该结点结尾的字符串是否存在 void insert(string s, int l) // 插入字符串&#xff0c;l是字符串长度 { int p 0;for (int i 0; i < …
阅读更多...
BGP邻居故障检测

BGP邻居故障检测

第一种情况:如果AR2和AR4采用直连建立邻居，则排查步骤如下： 1）在AR2和AR4上使用ping x.x.x.x命令检查AR2和AR4用于建立EBGP邻居关系的直连地址连通性是否正常。如果不能ping通。则需要使用二分法从网络层向下层逐层进行排查，首先检查接口地址及路由的可达性，修改完成后，如…
阅读更多...
Architecture Lab：Part C【流水线通用原理/Y86-64的流水线实现/实现IIADDQ指令】

Architecture Lab：Part C【流水线通用原理/Y86-64的流水线实现/实现IIADDQ指令】

目录 任务描述 知识回顾 流水线通用原理 Y86-64流水线实现&#xff08;PIPE-与PIPE&#xff09; 开始实验 IIADDQ指令的添加 优化 ncopy.ys 仅用第四章知识&#xff0c;CEP11.55 8x1展开&#xff0c;CPE9.35 8x1展开2x1展开消除气泡&#xff0c;CPE8.10 流水线化通过…
阅读更多...
最新文章

Copyright @ 2022~2023