vue3.0(十三)内置组件Transition和TransitionGroup

文章目录

  • 简介
  • 一、`<Transition>` 组件
    • 1.基本应用
    • 2.动画过程中发生的事情
    • 3.基于 CSS 的过渡效果
    • 4.JavaScript 钩子
    • 5.可复用过渡效果
    • 6.出现时过渡
    • 7.元素间过渡
    • 8.过渡模式
    • 9.组件间过渡
    • 10.动态过渡
    • 11.使用 Key Attribute 过渡
  • 二、`<TransitionGroup>`组件
    • 1.​​进入 / 离开动画
  • 三 `<Transition>`和`<TransitionGroup>`的区别

简介

制作基于状态变化的过渡和动画：

  • <Transition> 会在一个元素或组件进入和离开 DOM 时应用动画。本章节会介绍如何使用它。
  • <TransitionGroup> 会在一个 v-for 列表中的元素或组件被插入，移动，或移除时应用动画。

一、<Transition> 组件

<Transition> 是一个内置组件，它在任意别的组件中都可以被使用，无需注册。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。

1.基本应用

进入或离开触发条件：

  • 由 v-if 所触发的切换
  • 由 v-show 所触发的切换
  • 由特殊元素<component>切换的动态组件
  • 改变特殊的 key 属性
    <template><div><button @click="show = !show">Toggle</button><Transition><p v-if="show">hello</p></Transition></div>
</template><script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
export default defineComponent({setup () {const show = ref<boolean>(false)return {show}}})
</script>
<style scoped>
/*
* CSS 过渡 class1. v-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。2. v-enter-active：进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。3. v-enter-to：进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，在过渡或动画完成之后移除。4. v-leave-from：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。5. v-leave-active：离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。6. v-leave-to：离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除。*/
.v-enter-active,
.v-leave-active {transition: opacity 0.5s ease;
}.v-enter-from,
.v-leave-to {opacity: 0;
}
</style>
    注：<Transition> 仅支持单个元素或组件作为其插槽内容。如果内容是一个组件，这个组件必须仅有一个根元素。

2.动画过程中发生的事情

  • Vue 会自动检测目标元素是否应用了 CSS 过渡或动画。如果是，则一些 CSS 过渡 class 会在适当的时机被添加和移除。
  • 如果有作为监听器的 JavaScript 钩子，这些钩子函数会在适当时机被调用。
  • 如果没有探测到 CSS 过渡或动画、也没有提供 JavaScript 钩子，那么 DOM 的插入、删除操作将在浏览器的下一个动画帧后执行。

3.基于 CSS 的过渡效果

  1. 为过渡效果命名
    传一个 name prop 来声明一个过渡效果名：
    <template><div><button @click="show = !show">Toggle</button><!-- name设置的过渡名 --><Transition name="show"><p v-if="show">hello</p></Transition></div>
</template><script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
export default defineComponent({setup () {const show = ref<boolean>(false)return {show}}})
</script>
<style scoped>
.show-enter-active,
.show-leave-active {transition: opacity 1s ease;
}.show-enter-from,
.show-leave-to {opacity: 0;
}
</style>
  2. CSS 的 transition
    <Transition> 一般都会搭配原生 CSS 过渡一起使用。这个 transition CSS 属性是一个简写形式，使我们可以一次定义一个过渡的各个方面，包括需要执行动画的属性、持续时间和速度曲线。
    <template><div><button @click="show = !show">Toggle</button><Transition name="show"><p v-if="show">hello</p></Transition></div>
</template><script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
export default defineComponent({setup () {const show = ref<boolean>(false)return {show}}
})
</script>
<style scoped>.show-enter-active {transition: all 0.3s ease-out;
}.show-leave-active {transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}.show-enter-from,
.show-leave-to {transform: translateX(20px);opacity: 0;
}
</style>

Transition动画视频


3. CSS 的 animation

  • 原生 CSS 动画和 CSS transition 的应用方式基本上是相同的，只有一点不同，那就是 *-enter-from 不是在元素插入后立即移除，而是在一个 animationend 事件触发时被移除。
  • 对于大多数的 CSS 动画，我们可以简单地在 *-enter-active 和 *-leave-active class 下声明它们。
    <template><div><button @click="show = !show">Toggle</button><Transition name="show"><p v-if="show">CSS transition</p></Transition></div>
</template><script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
export default defineComponent({setup () {const show = ref<boolean>(false)return {show}}})
</script>
<style scoped>.show-enter-active {animation: bounce-in 0.5s;
}.show-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>

CSS 的 animation


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

  • enter-from-class
  • enter-active-class
  • enter-to-class
  • leave-from-class
  • leave-active-class
  • leave-to-class
    	<template><div><button @click="show = !show">Toggle</button><Transitionname="custom-classes"enter-active-class="animate__animated animate__tada"leave-active-class="animate__animated animate__bounceOutRight"><p v-if="show">custom-classes</p></Transition></div>
</template><script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
export default defineComponent({setup () {const show = ref<boolean>(false)return {show}}})
</script>
<style>
@import "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css";
</style>

Transition自定义过渡 class

  1. 同时使用 transition 和 animation
    Vue 需要附加事件监听器，以便知道过渡何时结束。可以是 transitionend 或 animationend，这取决于你所应用的 CSS 规则。如果你仅仅使用二者的其中之一，Vue 可以自动探测到正确的类型。
    传入 type prop 来声明，告诉 Vue 需要关心哪种类型，传入的值是 animation 或 transition
    <template><div><button @click="show = !show">Toggle</button><Transitionname="show"type="transition"><p v-if="show">type-animation</p></Transition></div>
</template><script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
export default defineComponent({setup () {const show = ref<boolean>(false)return {show}}})
</script>
<style lang="scss" scoped>
//  元素开始进入的状态 | 元素离开结束的状态
.show-enter-from,
.show-leave-to {
opacity: 0;
}
// 元素进入结束的状态 ｜ 元素开始离开的状态
.show-enter-to,
.show-leave-from {
opacity: 1;
}
// 元素进入 ｜ 结束时，过渡的效果
.show-enter-active,
.show-leave-active {// 过渡动画的使用
transition: opacity 2s linear 0s;
}
.show-enter-active {
animation: show-scale 2s linear 0s;
}
// 离开的时候设置成相反哒
.show-leave-active {
animation: show-scale 2s linear 0s reverse;
}@keyframes show-scale {0% {transform: scale(0);}50% {transform: scale(1.3);}100% {transform: scale(1);}
}
</style>

同时使用 transition 和 animation

  1. 深层级过渡与显式过渡时长
    尽管过渡 class 仅能应用在<Transition> 的直接子元素上，我们还是可以使用深层级的 CSS 选择器，在深层级的元素上触发过渡效果：
    <Transition> 组件会通过监听过渡根元素上的第一个 transitionend 或者 animationend 事件来尝试自动判断过渡何时结束。而在嵌套的过渡中，期望的行为应该是等待所有内部元素的过渡完成。通过向 <Transition> 组件传入 duration prop 来显式指定过渡的持续时间 (以毫秒为单位)。总持续时间应该匹配延迟加上内部元素的过渡持续时间：

    <template><div><button @click="show = !show">Toggle</button><Transition :duration="550" name="show"><div class="outer" v-if="show"><div class="inner">Hello inner</div></div></Transition></div>
</template><script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({setup () {const show = ref<boolean>(false)return {show}}})
</script>
<style lang="scss" scoped>
.outer {width: 200px;margin: auto;
}.outer, .inner {background: #eee;padding: 30px;min-height: 100px;
}
.inner { background: #ccc;
}.show-enter-active, .show-leave-active {transition: all 0.3s ease-in-out;
}
.show-leave-active {transition-delay: 0.25s;
}
.show-enter-from,
.show-leave-to {transform: translateY(30px);opacity: 0;
}
// 可以在深层元素上添加一个过渡延迟，从而创建一个带渐进延迟的动画序列：
.show-enter-active .inner,
.show-leave-active .inner { transition: all 0.3s ease-in-out;
}.show-enter-active .inner {transition-delay: 0.25s;
}.show-enter-from .inner,
.show-leave-to .inner {transform: translateX(30px);opacity: 0.001;
}
</style>

Transition 深层级过渡与显式过渡时长

  1. 性能考量
    transform 和 opacity 之类的。用这些属性制作动画非常高效，因为：
  • 他们在动画过程中不会影响到 DOM 结构，因此不会每一帧都触发昂贵的 CSS 布局重新计算。
  • 大多数的现代浏览器都可以在执行 transform 动画时利用 GPU 进行硬件加速。
    相比之下，像 height 或者 margin 这样的属性会触发 CSS 布局变动，因此执行它们的动画效果更昂贵，需要谨慎使用。可以在 CSS-Triggers 这类的网站查询哪些属性会在执行动画时触发 CSS 布局变动。

4.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":css="false
><!-- ... -->
</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 规则意外地干扰过渡效果：
在有了 :css=“false” 后，就可以全权负责控制什么时候过渡结束了。这种情况下对于 @enter 和 @leave 钩子来说，回调函数 done 就是必须的。否则，钩子将被同步调用，过渡将立即完成。

5.可复用过渡效果

要创建一个可被复用的过渡，我们需要为 <Transition> 组件创建一个包装组件，并向内传入插槽内容：

<!-- 封装的组件 -->
<script>
// JavaScript 钩子逻辑...
</script><template><!-- 包装内置的 Transition 组件 --><Transitionname="my-transition"@enter="onEnter"@leave="onLeave"><slot></slot> <!-- 向内传递插槽内容 --></Transition>
</template><style>
/*必要的 CSS...注意：避免在这里使用 <style scoped>因为那不会应用到插槽内容上
*/
</style>

// 组件中的使用
<MyTransition><div v-if="show">Hello</div>
</MyTransition>

6.出现时过渡

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

<Transition appear>...
</Transition>

7.元素间过渡

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


<template><div><div class="btn-container"><Transition name="slide-up"><button v-if="docState === 'saved'"@click="docState = 'edited'">Edit</button><button v-else-if="docState === 'edited'"@click="docState = 'editing'">Save</button><button v-else-if="docState === 'editing'"@click="docState = 'saved'">Cancel</button></Transition></div></div>
</template>
<script setup>
import { ref } from 'vue'const docState = ref('saved')
</script><style>
.btn-container {display: inline-block;position: relative;height: 1em;
}button {position: absolute;
}.slide-up-enter-active,
.slide-up-leave-active {transition: all 0.25s ease-out;
}.slide-up-enter-from {opacity: 0;transform: translateY(30px);
}.slide-up-leave-to {opacity: 0;transform: translateY(-30px);
}
</style>

8.过渡模式

进入和离开的元素都是在同时开始动画的，因此不得不将它们设为 position: absolute 以避免二者同时存在时出现的布局问题。
然而，很多情况下这可能并不符合需求。可能想要先执行离开动画，然后在其完成之后再执行元素的进入动画。手动编排这样的动画是非常复杂的，好在我们可以通过向 <Transition> 传入一个 mode prop 来实现这个行为：

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

9.组件间过渡

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

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

10.动态过渡

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

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

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

11.使用 Key Attribute 过渡

有时为了触发过渡，你需要强制重新渲染 DOM 元素。

<template><Transition><span :key="count">{{ count }}</span></Transition>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);setInterval(() => count.value++, 1000);
</script>

如果不使用 key attribute，则只有文本节点会被更新，因此不会发生过渡。但是，有了 key 属性，Vue 就知道在 count 改变时创建一个新的 span 元素，因此 Transition 组件有两个不同的元素在它们之间进行过渡。

二、<TransitionGroup>组件

<TransitionGroup> 是一个内置组件，用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。
当在 DOM 内模板中使用时，组件名需要写为 <transition-group>。

1.​​进入 / 离开动画

<TransitionGroup> 对一个 v-for 列表添加进入 / 离开动画的示例：

<template><div><TransitionGroup name="list" tag="ul"><li v-for="item in list" :key="item">{{ item }}</li></TransitionGroup><p><button @click="handleAdd">在任意位置添加一项</button></p><p><button @click="handleDelete">移除任意位置上一项</button></p></div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({setup () {const list = ref([])function handleAdd () {const randomNumber = Math.floor(Math.random() * list.value.length)list.value.splice(randomNumber, 0, list.value.length)}function handleDelete () {const randomNumber = Math.floor(Math.random() * list.value.length) + 1list.value.splice(randomNumber, 1)}return {list,handleAdd,handleDelete}}})
</script><style>
.list-enter-active,
.list-leave-active {transition: all 0.25s ease-out;
}.list-enter-from {opacity: 0;transform: translateY(30px);
}.list-leave-to {opacity: 0;transform: translateY(-30px);
}
</style>

三 <Transition>和<TransitionGroup>的区别

<TransitionGroup> 支持和 <Transition> 基本相同的 props、CSS 过渡 class 和 JavaScript 钩子监听器，但有以下几点区别：

  • 默认情况下，它不会渲染一个容器元素。但你可以通过传入 tag prop 来指定一个元素作为容器元素来渲染。
  • 过渡模式在这里不可用，因为不再是在互斥的元素之间进行切换。
  • 列表中的每个元素都必须有一个独一无二的 key attribute。
  • CSS 过渡 class 会被应用在列表内的元素上，而不是容器元素上。

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

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

相关文章

Blender：渲染输出

Blender：渲染输出

渲染输出界面 渲染设置界面&#xff1a; 输出设置界面&#xff1a; 输出文件格式 【文档】 视频导出格式&#xff1a; AVI JPEG 使用JPEG压缩的AVI。有损&#xff0c;能得到更小的文件&#xff0c;但大小无法与编解码器的压缩算法得到的文件相比。JPEG 压缩也是数字摄像机使用…
阅读更多...
开源项目-MES制造执行系统

开源项目-MES制造执行系统

哈喽，大家好，今天主要给大家带来一个开源项目-制造执行系统 制造执行系统的主要功能包括系统管理，物料管理，工艺管理，计划管理，在制品管理，数字化平台，数字孪生等模块 <
阅读更多...
知识图谱的应用---新零售

知识图谱的应用---新零售

文章目录 新零售知识图谱构建过程典型应用 新零售 新零售&#xff0c;即个人、企业以互联网为依托&#xff0c;通过运用大数据、人工智能等先进技术手段并运用心理学知识&#xff0c;对商品的生产、流通与销售过程进行升级改造&#xff0c;进而重塑业态结构与生态圈&#xff0c…
阅读更多...
精准定位，智慧提纯：高级数据提取策略

精准定位，智慧提纯：高级数据提取策略

在数据驱动的时代&#xff0c;高级数据提取策略成为企业决策、科学研究以及各类项目成功的关键。数据提取&#xff0c;不仅仅是简单地收集信息&#xff0c;而是需要精准定位目标数据&#xff0c;并通过智慧提纯方法&#xff0c;从海量数据中提取出有价值、有深度的信息。本文将…
阅读更多...
Redis之线程IO模型

Redis之线程IO模型

引言 Redis是个单线程程序&#xff01;这点必须铭记。除了Redis之外&#xff0c;Node.js也是单线程&#xff0c;Nginx也是单线程&#xff0c;但是他们都是服务器高性能的典范。 Redis单线程为什么能够这么快&#xff01; 因为他所有的数据都在内存中&#xff0c;所有的运算都…
阅读更多...
【制作100个unity游戏之29】使用unity复刻经典游戏《愤怒的小鸟》（完结，附带项目源码）

【制作100个unity游戏之29】使用unity复刻经典游戏《愤怒的小鸟》（完结，附带项目源码）

最终效果 文章目录 最终效果前言素材下载简单搭建环境控制小鸟生成弹簧 限制小鸟的控制范围弹簧线的显示隐藏飞行新增木头木头销毁不同血量的木头状态配置更多物品爆炸效果创建敌人的小猪创建多个小鸟循环游戏结束相机跟随加分特效不同定义技能的鸟加速鸟回旋鸟爆炸鸟效果 轨迹…
阅读更多...
小学生作文辅导杂志小学生作文辅导杂志社小学生作文辅导编辑部2024年第2期目录

小学生作文辅导杂志小学生作文辅导杂志社小学生作文辅导编辑部2024年第2期目录

写法导引 创意引航&#xff0c;笔墨生辉——小学语文习作教学中的创新思维训练 杜娟; 3-5 陶行知“小先生制”教育思想在小学作文练习中的应用探索 张淑勤; 6-8 新课程标准视域下小学语文习作教学策略探析 任真真; 9-11 即时作文&#xff1a;开辟小学习作教学的…
阅读更多...
Spring Boot集成 Spring Retry 实现容错重试机制并附源码

Spring Boot集成 Spring Retry 实现容错重试机制并附源码

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…
阅读更多...
MATLAB神经网络---激活层

MATLAB神经网络---激活层

非线性变换的目的 非线性变换的目的是为神经网络引入一些非线性特征&#xff0c;使其训练出一些符合各种曲线或各种特征的模型。 换句话来说&#xff0c;如果模型都是直线特征的话&#xff0c;它的泛化能力会不够好。 目录 深度学习层列表 - MATLAB & Simulink - MathWo…
阅读更多...
初识MySQL数据库

初识MySQL数据库

目录 一、了解数据库 1.数据库的相关概念 2.数据库系统发展史 3.主流数据库产品 二、数据库分类 1.关系数据库 2.非关系型数据库 三、mysql的yum安装与源码编译安装 1.源码编译安装mysql 2.yum安装 mysql5.7 四、MySQL数据类型 1.常用的数据类型 五、查看数据库…
阅读更多...
高性能8位单片机 CA51M151，1T 8051内核 / 内置12位ADC / 16 位PWM / 支持触摸 / 8K MTP

高性能8位单片机 CA51M151，1T 8051内核 / 内置12位ADC / 16 位PWM / 支持触摸 / 8K MTP

CA51M151 系列芯片是基于 1T 8051 内核的 8 位微控制器&#xff0c;不仅保留了传统 8051 芯片的基本特性&#xff0c;通常情况下运行速度比传统的 8051 芯片快 10 倍&#xff0c;性能更加优越。芯片内置 8 KB MTP 程序存储器&#xff0c;256Byte 内部RAM&#xff0c;512Byte 外…
阅读更多...
持绪电商：开一家抖音网店大概多久才能做起来

持绪电商：开一家抖音网店大概多久才能做起来

在数字化浪潮的推动下&#xff0c;抖音不仅是年轻人喜爱的短视频平台&#xff0c;更成为电商的新阵地。不少创业者和品牌纷纷入驻&#xff0c;希望能借力抖音的流量红利实现快速成长。但开设一家抖音网店并使其蓬勃发展&#xff0c;并非一朝一夕之事&#xff0c;它需要策略、耐…
阅读更多...
植物大战僵尸（杂交版）最新版V2.1来袭！

植物大战僵尸（杂交版）最新版V2.1来袭！

【新手指导】最新版v2.1来袭 1.闪退怎么办&#xff1f; 答:窗口模式可以解决大部分问题。输入法转换成英文也可以。最后一种办法管理员运行&#xff0c;再后台可运行&#xff0c;即便不是窗口也不会闪退&#xff0c;亲测有效 2.哪里下载&#xff1f; 答&#xff1a;夸克网盘htt…
阅读更多...
【网络编程】套接字的多种可选项

【网络编程】套接字的多种可选项

可以看出&#xff0c;套接字可选项是分层的。IPPROTOIP层可选项是IP协议相关事项IPPROTO TCP层可选项是TCP协议相关的事项&#xff0c;SOLSOCKET层是套接字相关的通用可选项 getsockopt&&setsockopt #include <sys/socket.h> int getsockopt(int sock, int lev…
阅读更多...
呼叫中心系统的基本功能需求okcc呼叫中心pscc磐石云

呼叫中心系统的基本功能需求okcc呼叫中心pscc磐石云

呼叫中心系统的基本功能需求&#xff1a; 1、自动分配来电话务量&#xff0c;保证客户电话的最高接入率&#xff1b; 2、软电话功能&#xff1a;示忙&#xff0f;示闲&#xff0c;主叫、被叫号码显示&#xff0c;来话保持、来话转移&#xff0c;呼出&#xff0f;内部呼叫&#…
阅读更多...
postgresql报错：列“XXX”必须出现在GROUP BY子句中或在聚合函数中使用

postgresql报错：列“XXX”必须出现在GROUP BY子句中或在聚合函数中使用

背景 我在做一个对关联的几张表进行select的操作时&#xff0c;因为有写重复数据&#xff0c;我只需要其中一条&#xff0c;所以我按照字段写了一个group by&#xff0c;希望每个分组只保留一条数据给我就行了。但是一致性就报如题所示的错误。 原因 据了解&#xff0c;post…
阅读更多...
【JMeter接口测试工具】第二节.JMeter项目实战（下）【实战篇】

【JMeter接口测试工具】第二节.JMeter项目实战（下）【实战篇】

文章目录 前言一、接口弱压力测试二、高并发、高频率三、生成图形化报告总结 前言 一、接口弱压力测试 场景举例&#xff1a; 场景1:模拟半小时之内 1000 个用户访问服务器资源&#xff0c;要求平均响应时间在3000ms内&#xff0c;且错误率为0 实现步骤&#xff1a; 步骤一&am…
阅读更多...
VirtualBox、Centos7下安装docker后pull镜像问题

VirtualBox、Centos7下安装docker后pull镜像问题

Docker安装篇(CentOS7安装)_docker 安装 centos7-CSDN博客 首先&#xff0c;安装docker可以根据这篇文章进行安装&#xff0c;安装完之后&#xff0c;我们就需要去通过docker拉取相关的服务镜像&#xff0c;然后安装相应的服务容器&#xff0c;比如我们通过docker来安装mysql,…
阅读更多...
什么是场外期权？场外期权有几种做法？

什么是场外期权？场外期权有几种做法？

今天带你了解什么是场外期权&#xff1f;场外期权有几种做法&#xff1f;期权分为场内期权&#xff0c;场外期权。场内期权我们都知道&#xff0c;是在期货盘里购买的期权&#xff0c;但场外期权呢&#xff1f; 什么是场外期权&#xff1f; 场外期权是一种在交易所之外进行交易…
阅读更多...
拿下SOTA！最强中文Embedding模型对标OpenAI，技术路线公开

拿下SOTA！最强中文Embedding模型对标OpenAI，技术路线公开

国产大模型「日日新 5.0」已经在权威主流评测中鲨疯了。变强的背后原因竟是&#xff0c;来自商汤自研中文Embedding模型——Piccolo2。这是首个对标OpenAI向量长度的模型。 国产大模型最近在权威主流评测中「杀」疯了&#xff01; 商汤「日日新 5.0」在中文大模型测评基准Sup…
阅读更多...
最新文章

Copyright @ 2022~2023