位置: IT常识 - 正文

Vue3折叠面板(Collapse)(vue叠化在哪里)

编辑:rootadmin
Vue3折叠面板(Collapse)

推荐整理分享Vue3折叠面板(Collapse)(vue叠化在哪里),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue侧边栏展开和折叠原理,vue侧边栏展开和折叠原理,vue 折叠面板,vue折叠动画效果,elementui折叠面板,vue 折叠面板,vue3折叠面板,vue折叠动画效果,内容如对您有帮助,希望把文章链接给更多的朋友!

可自定义设置以下属性:

折叠面板数据,可使用 slot 替换对应索引的 header 和 text(collapseData),必传,类型:Array<{key?: string, header?: string | slot, text?: string | slot}>,默认 []

当前激活 tab 面板的 key(activeKey),类型:number[] | number | string[] | string | null,默认 null

是否可复制面板内容(copyable),类型:number,默认 false

面板右上角固定内容,例如标识language(lang),类型:string | slot,默认 ''

面板标题和内容,字体大小(fontSize),类型:number,单位px,默认 0

Vue3折叠面板(Collapse)(vue叠化在哪里)

面板标题字体大小,优先级高于fontSize(headerFontSize),类型:number,单位px,默认 14

面板内容字体大小,优先级高于fontSize(textFontSize),类型:number,单位px,默认 14

是否展示面板上的箭头(showArrow),类型:boolean,默认 true

效果如下图:

 注:组件引用方法 import { rafTimeout } from '../index' 请参考以下博客:

使用requestAnimationFrame模拟实现setTimeout和setInterval_theMuseCatcher的博客-CSDN博客使用requestAnimationFrame模拟实现setTimeout和setInterval!https://blog.csdn.net/Dandrose/article/details/130167061

①创建折叠面板组件Collapse.vue: 

<script setup lang="ts">import { ref, watchEffect } from 'vue'// 使用 requestAnimationFrame 实现的等效 setTimeoutimport { rafTimeout } from '../index'interface Collapse { key?: string|number // 对应activeKey,如果没有传入key属性,则默认使用数据索引(0,1,2...)绑定 header?: string // 面板标题 string | slot text?: string // 面板内容 string | slot}interface Props { collapseData: Collapse[] // 折叠面板数据,可使用 slot 替换对应索引的 header 和 text activeKey?: number[] | number | string[] | string | null // 当前激活 tab 面板的 key copyable?: boolean // 是否可复制面板内容 lang?: string // 面板右上角固定内容,例如标识language string | slot fontSize?: number // 面板标题和内容,字体大小 headerFontSize?: number // 面板标题字体大小,优先级高于fontSize textFontSize?: number // 面板内容字体大小,优先级高于fontSize showArrow?: boolean // 是否展示面板上的箭头}const props = withDefaults(defineProps<Props>(), { collapseData: () => [], activeKey: null, copyable: false, lang: '', fontSize: 0, headerFontSize: 14, textFontSize: 14, showArrow: true})watchEffect(() => { const len = props.collapseData.length if (len) { getCollapseHeight(len) // 获取各个面板内容高度 }}, { flush: 'post' })const text = ref()const collapseHeight = ref<any[]>([])function getCollapseHeight (len: number) { for (let n = 0; n < len; n++) { collapseHeight.value.push(text.value[n].offsetHeight) }}const emits = defineEmits(['update:activeKey', 'change'])function dealEmit (value: any) { emits('update:activeKey', value) emits('change', value)}function onClick (key: number|string) { if (activeJudge(key)) { if (Array.isArray(props.activeKey)) { const res = (props.activeKey as any[]).filter(actKey => actKey!== key) dealEmit(res) } else { dealEmit(null) } } else { if (Array.isArray(props.activeKey)) { dealEmit([...props.activeKey, key]) } else { dealEmit(key) } }}function activeJudge (key: number|string): boolean { if (Array.isArray(props.activeKey)) { return (props.activeKey as any[]).includes(key) } else { return props.activeKey === key }}const copyTxt = ref('Copy')function onCopy (index: number) { navigator.clipboard.writeText(text.value[index].innerText || '').then(() => { /* clipboard successfully set */ copyTxt.value = 'Copied' rafTimeout(() => { copyTxt.value = 'Copy' }, 3000) }, (err) => { /* clipboard write failed */ copyTxt.value = err })}</script><template> <div class="m-collapse"> <div class="m-collapse-item" :class="{'u-collapse-item-active': activeJudge(data.key || index)}" v-for="(data, index) in collapseData" :key="index"> <div class="u-collapse-header" @click="onClick(data.key || index)"> <svg focusable="false" v-if="showArrow" class="u-arrow" data-icon="right" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg> <div class="u-header" :class="{ml24: showArrow}" :style="`font-size: ${fontSize || headerFontSize}px;`"> <slot name="header" :header="data.header" :index="index">{{ data.header || '--' }}</slot> </div> </div> <div class="u-collapse-content" :class="{'u-collapse-copyable': copyable}" :style="`height: ${activeJudge(data.key || index) ? collapseHeight[index]:0}px;`"> <div class="u-lang"> <slot name="lang" :lang="lang" :key="data.key || index">{{ lang }}</slot> </div> <Button size="small" class="u-copy" type="primary" @click="onCopy(index)">{{ copyTxt }}</Button> <div ref="text" class="u-text" :style="`font-size: ${fontSize || textFontSize}px;`"> <slot name="text" :text="data.text" :key="data.key || index">{{ data.text }}</slot> </div> </div> </div> </div></template><style lang="less" scoped>* { box-sizing: border-box; margin: 0; padding: 0;}.m-collapse { background-color: rgba(0, 0, 0, 0.02); border: 1px solid #d9d9d9; border-bottom: 0; border-radius: 8px; .m-collapse-item { border-bottom: 1px solid #d9d9d9; &:last-child { border-radius: 0 0 8px 8px; .u-collapse-content { border-radius: 0 0 8px 8px; } } .u-collapse-header { position: relative; padding: 12px 16px; cursor: pointer; transition: all 0.3s; .u-arrow { position: absolute; width: 12px; height: 12px; top: 0; bottom: 0; margin: auto 0; fill: rgba(0,0,0,.88); transition: transform 0.3s; } .u-header { display: inline-block; color: rgba(0, 0, 0, 0.88); line-height: 1.5714285714285714; } .ml24 { margin-left: 24px; } } .u-collapse-content { position: relative; height: 0; overflow: hidden; background-color: #fff; transition: height .3s; .u-lang { position: absolute; right: 10px; top: 6px; font-size: 14px; color: rgba(0, 0, 0, .38); opacity: 1; transition: opacity .3s; } .u-copy { position: absolute; right: 8px; top: 8px; opacity: 0; pointer-events: none; transition: opacity .3s; } .u-text { padding: 16px; color: rgba(0, 0, 0, 0.88); white-space: pre-wrap; } } .u-collapse-copyable { &:hover { .u-lang { opacity: 0; pointer-events: none; } .u-copy { opacity: 1; pointer-events: auto; } } } } .u-collapse-item-active { .u-arrow { transform: rotate(90deg); } .u-collapse-content { border-top: 1px solid #d9d9d9; } }}</style>

②在要使用的页面引入:

<script setup lang="ts">import { Collapse } from './Collapse.vue'import { ref, watchEffect } from 'vue'const collapseData = ref([ { key: '1', header: 'This is panel header 1', text: 'A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.' }, { key: '2', header: 'This is panel header 2', text: ` A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world. A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.` }, { key: '3', header: 'This is panel header 3', text: 'A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.' }])const activeKey = ref(['1'])watchEffect(() => { console.log('activeKey:', activeKey.value)})const key = ref('1')watchEffect(() => { console.log('key:', key.value)})function onChange (key: any) { console.log('change:', key)}</script><template> <div> <h2 class="mb10">Collapse 折叠面板基本使用 (activeKey 传入 number[] | string[],所有面板可同时展开)</h2> <Collapse :collapseData="collapseData" v-model:activeKey="activeKey" @change="onChange" /> <h2 class="mt30 mb10">'手风琴' (只允许单个内容区域展开,只需 activeKey 传入 number | string 即可)</h2> <Collapse :collapseData="collapseData" v-model:activeKey="key" @change="onChange" /> <h2 class="mt30 mb10">可复制面板内容 (copyable)</h2> <Collapse lang="template" copyable :collapseData="collapseData" v-model:activeKey="activeKey" @change="onChange" /> <h2 class="mt30 mb10">使用插槽 slot 自定义 header、lang、text 内容</h2> <Collapse copyable :collapseData="collapseData" v-model:activeKey="activeKey" @change="onChange"> <template #header="{ header, key }"> <span v-if="key==='1'" style="color: burlywood;">burlywood color {{ header }} (key = {{ key }})</span> </template> <template #lang>typescript</template> <template #text="{ text, key }"> <span v-if="key==='1'" style="color: burlywood;">burlywood color {{ text }} (key = {{ key }})</span> </template> </Collapse> <h2 class="mt30 mb10">折叠面板,隐藏箭头图标 (showArrow: false)</h2> <Collapse :show-arrow="false" :collapseData="collapseData" v-model:activeKey="activeKey" @change="onChange"/> </div></template><style lang="less" scoped></style>
本文链接地址:https://www.jiuchutong.com/zhishi/295167.html 转载请保留说明!

上一篇:基于骨骼关键点的动作识别(OpenMMlab学习笔记,附PYSKL相关代码演示)(基于骨骼关键点的动作识别)

下一篇:布罗兹湿地国家公园,英国诺福克郡 (© Steven Docwra/Getty Images)(布兹洛夫)

  • 支付宝城市服务在哪里(支付宝城市服务随手拍举报在哪里)

    支付宝城市服务在哪里(支付宝城市服务随手拍举报在哪里)

  • 支付宝如何提升芝麻分(支付宝如何提升人脉关系)

    支付宝如何提升芝麻分(支付宝如何提升人脉关系)

  • vivoz6对比vivos6有什么不同吗(vivoz6对比vivos6,哪个手机好)

    vivoz6对比vivos6有什么不同吗(vivoz6对比vivos6,哪个手机好)

  • 小米9se可以人脸解锁吗(小米9se有人脸解锁吗)

    小米9se可以人脸解锁吗(小米9se有人脸解锁吗)

  • 为什么联系人里面不显示联系人

    为什么联系人里面不显示联系人

  • 手机定时开关机软件(手机定时开关机在哪里设置)

    手机定时开关机软件(手机定时开关机在哪里设置)

  • 手机太卡了怎么办(手机太卡了怎么解决?vivo)

    手机太卡了怎么办(手机太卡了怎么解决?vivo)

  • qq账号在哪里看得到(qq官方网站登录)

    qq账号在哪里看得到(qq官方网站登录)

  • 华为手机可以当门禁卡使用吗(华为手机可以当电视遥控器吗)

    华为手机可以当门禁卡使用吗(华为手机可以当电视遥控器吗)

  • 拼多多退货申请撤销后还能再申请吗(拼多多退货申请次数上限怎么办)

    拼多多退货申请撤销后还能再申请吗(拼多多退货申请次数上限怎么办)

  • 对方忙线中对方会收到提醒吗(对方忙线中对方知道吗)

    对方忙线中对方会收到提醒吗(对方忙线中对方知道吗)

  • oppo手机计算器删除了怎么恢复(oppo手机计算器在哪里找)

    oppo手机计算器删除了怎么恢复(oppo手机计算器在哪里找)

  • iphonexs是双卡双待吗(苹果iphonexs双卡双待)

    iphonexs是双卡双待吗(苹果iphonexs双卡双待)

  • 物联网表号是什么意思(什么是物联网表表号)

    物联网表号是什么意思(什么是物联网表表号)

  • 手机qq怎么清除缓存(手机QQ怎么清除单向好友)

    手机qq怎么清除缓存(手机QQ怎么清除单向好友)

  • mate20怎么关闭后台程序(华为mate20怎么关)

    mate20怎么关闭后台程序(华为mate20怎么关)

  • 苹果人工服务24小时吗(苹果人工服务24小时 在线客服电话转人工)

    苹果人工服务24小时吗(苹果人工服务24小时 在线客服电话转人工)

  • 美版三星s10和国行的区别(美版三星s10和s10+区别)

    美版三星s10和国行的区别(美版三星s10和s10+区别)

  • 笔记本电脑除号怎么打(笔记本电脑除号怎么打按哪个键盘呢)

    笔记本电脑除号怎么打(笔记本电脑除号怎么打按哪个键盘呢)

  • 迅雷收藏在哪里(迅雷收藏在哪里打开)

    迅雷收藏在哪里(迅雷收藏在哪里打开)

  • 苹果6p有实况吗(苹果6版本过低如何升级ios13)

    苹果6p有实况吗(苹果6版本过低如何升级ios13)

  • 闲聊来信息怎么没声音(闲聊来信息怎么设置铃声)

    闲聊来信息怎么没声音(闲聊来信息怎么设置铃声)

  • p30有50倍变焦吗(p30多少倍光学变焦)

    p30有50倍变焦吗(p30多少倍光学变焦)

  • sed命令  批量编辑文本文件(sed多个命令匹配条件格式)

    sed命令 批量编辑文本文件(sed多个命令匹配条件格式)

  • 总额法和净额法会计分录对比
  • 车辆购置税税收优惠
  • 防火门属于固定式防火风格
  • 金税三期电子发票怎么领取
  • 员工报销款可以公转私吗
  • 如何设置处理器个数如何设置显示器超频
  • 普通发票做账有什么用
  • 自制农产品采摘机器设备
  • 开红字发票如何调整收入?
  • 购买的员工福利需要缴纳印花税
  • 出租屋物品损坏怎么赔偿
  • 一次性付清的优缺点
  • 增值税抵扣期限多少天
  • 企业所得税怎么做
  • 外购烟丝消费税是多少
  • 呆帐死帐处理
  • 现金购入库存商品的分录
  • 实物出资需要发票吗
  • 预缴税金跨区域涉税在哪查询
  • 账面价值和账面成本的区别
  • 企业如何选择会计准则
  • 外贸 代理
  • 微软输入法打不出汉字
  • 栗耳簇舌巨嘴鸟,巴西潘塔纳尔保护区里 (© Ana Gram/Shutterstock)
  • 城建税会计分录怎么写
  • 股东向公司借款协议书范本
  • 怎么扣除税费
  • win10电脑记事本在哪
  • 看望员工生病的家属支付现金如何入账
  • 企业缴纳保险的比例
  • PHP:imagecolorexact()的用法_GD库图像处理函数
  • 月初在产品成本+本月生产费用
  • 天堂之路歌曲
  • 邮件发送错误怎么解释
  • 普莱斯德
  • 图像融合名词解释
  • 购进的产品样品怎么入账
  • framework在哪里打开
  • 蓝牙11
  • 注意!PHP 7中不要做的10件事
  • 收到销售方的负债怎么办
  • iotop命令 监视磁盘I/O状态
  • 税控服务费减免会计分录
  • 新版个税申报系统查询
  • 小规模收入怎么算
  • 保险公司 返点
  • 收到跨月的费用发票怎么入账
  • 付给供应商的货款怎么写记账凭证
  • 一次性伤残补助金是单位给的还是社保给的
  • 抵扣认证的发票需要还回去吗
  • 已启动申报比对异常怎样才能作废,还没过税期
  • 销售会员卡怎么开票
  • 分公司账务处理需要注意哪些
  • sqlserver优化的几种方法
  • sql多行合并成一行 oracle
  • linux下mysql开启远程访问权限 防火墙开放3306端口
  • win7怎么下载win10
  • vista安装图解
  • xp系统无法安装win7系统
  • win7开机zyufs7
  • win7开机提示重启怎么办
  • unity editor window
  • three.js菜鸟教程
  • nodejs使用场景
  • 安卓笔记软件squid使用方法
  • 使用netcat(瑞士军刀)进行文件传输
  • 怎么重置mysql的密码
  • 修改系统用户名为英文
  • python里面有什么
  • python中字典的键值对
  • unity改vs版本
  • unity中物体移动代码
  • 学习雷锋好榜样
  • JavaScript+html5 canvas绘制渐变区域完整实例
  • html微信
  • 国家扶贫项目有循环卡吗
  • 国家税务总局手工发票查询平台
  • 消费税申报详细流程图
  • 黄金消费税如何缴纳
  • 进货没有发票怎么报税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设