位置: 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)(布兹洛夫)

  • vivoz3i怎么恢复出厂设置(vivoz3怎么恢复出厂设置)

    vivoz3i怎么恢复出厂设置(vivoz3怎么恢复出厂设置)

  • 苹果耳机怎么连接华为手机(苹果耳机怎么连接新设备)

    苹果耳机怎么连接华为手机(苹果耳机怎么连接新设备)

  • 网易云音乐怎么注册(网易云音乐怎么下载mp3格式)

    网易云音乐怎么注册(网易云音乐怎么下载mp3格式)

  • 小米怎么连接电脑(小米怎么连接电视机)

    小米怎么连接电脑(小米怎么连接电视机)

  • QQ资料卡展示设置在哪里(qq资料卡怎么显示)

    QQ资料卡展示设置在哪里(qq资料卡怎么显示)

  • qq上非好友怎么拉黑他(qq非好友怎么看有没有被屏蔽)

    qq上非好友怎么拉黑他(qq非好友怎么看有没有被屏蔽)

  • 微信运动什么时候更新(微信运动什么时候刷新)

    微信运动什么时候更新(微信运动什么时候刷新)

  • ipadpro蜂窝版什么时候发售(ipadpro蜂窝版值得买吗?)

    ipadpro蜂窝版什么时候发售(ipadpro蜂窝版值得买吗?)

  • 拉黑对方对方还有聊天记录吗(拉黑对方对方还能看到我的微信号吗)

    拉黑对方对方还有聊天记录吗(拉黑对方对方还能看到我的微信号吗)

  • 苹果耳机不弹窗怎么办(苹果耳机不弹窗口)

    苹果耳机不弹窗怎么办(苹果耳机不弹窗口)

  • 微信顶部看不见时间(微信顶部不显示文字怎么设置)

    微信顶部看不见时间(微信顶部不显示文字怎么设置)

  • 微信看不见对方朋友圈是被删了吗(微信看不见对方头像是怎么回事)

    微信看不见对方朋友圈是被删了吗(微信看不见对方头像是怎么回事)

  • 黑名单打电话过来有提示吗(黑名单打电话过来,会有短信提醒)

    黑名单打电话过来有提示吗(黑名单打电话过来,会有短信提醒)

  • 苹果x信号时有时无(苹果x信号时有时无 维修思路)

    苹果x信号时有时无(苹果x信号时有时无 维修思路)

  • 实时单什么意思(花小猪实时单什么意思)

    实时单什么意思(花小猪实时单什么意思)

  • 为什么微信安装不了(为什么微信安装不上)

    为什么微信安装不了(为什么微信安装不上)

  • 剪映草稿箱视频怎么保存到手机(剪映草稿箱视频丢失如何恢复)

    剪映草稿箱视频怎么保存到手机(剪映草稿箱视频丢失如何恢复)

  • 微信腾讯服务怎么修改(微信腾讯服务怎么开通)

    微信腾讯服务怎么修改(微信腾讯服务怎么开通)

  • 华为mate30pro是什么屏幕(华为mate30pro属于什么手机)

    华为mate30pro是什么屏幕(华为mate30pro属于什么手机)

  • 手机qq怎么关闭定位(手机qq怎么关闭qq空间)

    手机qq怎么关闭定位(手机qq怎么关闭qq空间)

  • 手机怎么把两张图片拼在一起(手机怎么把两张照片重叠)

    手机怎么把两张图片拼在一起(手机怎么把两张照片重叠)

  • 华为手机视频打不开是怎么回事(华为手机视频打马赛克)

    华为手机视频打不开是怎么回事(华为手机视频打马赛克)

  • 微信当日步数怎么抹除(微信当日步数怎么删掉 知乎)

    微信当日步数怎么抹除(微信当日步数怎么删掉 知乎)

  • 电话服务密码怎么修改(电话服务密码怎么查询联通)

    电话服务密码怎么修改(电话服务密码怎么查询联通)

  • 电脑连接网线但是无法上网(电脑连接网线但没有网络)

    电脑连接网线但是无法上网(电脑连接网线但没有网络)

  • mmtray.exe是什么进程 有什么用 mmtray进程查询(mmc.exe是什么)

    mmtray.exe是什么进程 有什么用 mmtray进程查询(mmc.exe是什么)

  • 附加税计提会计科目
  • 一般纳税人财务要求
  • 汇算清缴职工教育费填在
  • 申报所得税季初资产总额怎么填?
  • 综合所得减除费用标准
  • 无形资产升值怎么处理
  • 个人独资企业变更投资人要交税吗
  • 业务招待费怎么做会计分录
  • 货物发出未开票不确认收入
  • 全额抵减税控盘分录
  • 代开专票作废退税怎么做账?
  • 企业自建厂房转让如何计算增值税
  • 先付一半款财务应该怎么写
  • 调财务报表怎样调整
  • 分公司税务是独立核算还是非独立
  • 营业账簿印花税怎么算
  • 公司筹建期的个税怎么交
  • 企业接受大额捐赠,可以分次确认收入缴纳企业所得税吗?
  • 月底结账哪些科目有余额
  • 预收款没有发票怎么入账
  • 境外公司在境内取得的收入如何交税
  • 收到美金货款
  • 其他有形动产租赁服务
  • 企业没有土地证
  • 生产成本可以结转到其他业务成本吗
  • mac如何重装系统win10
  • win7系统无法启用网络发现
  • 工程机械租赁公司图片
  • 电脑文件启用宏是什么意思
  • 初中英语的学科知识与能力主要考什么
  • typecho插件开发教程
  • php的pdo是什么
  • 低值易耗品总账科目叫什么
  • 国家规定免税饲料具体哪些产品
  • 亚美尼亚格加尔德修道院
  • 工商年报中营业费用包括
  • 没有校验码的发票可以报销吗
  • 子公司分公司和办事处账务上的区别有哪些
  • vue3.0用法
  • ubuntu下安装windows
  • 在linux服务器中新增加一块硬盘
  • 工程施工科目借方尾差怎么调整
  • 预付账款的会计编码是多少?
  • 返利销售的增值税怎么算
  • 税金及附加如何预测
  • 成立一般纳税人的利弊
  • 出口货物的报关时间为货物运抵海关
  • 发票冲红视频教程
  • 企业的存货清查包括
  • 研发费用加计扣除新税收政策
  • 工程施工人工费,材料费,机械费占多少比例
  • 跨月的增值税普通发票能作废吗
  • 同一个单位能否交五险
  • 财政拨款的事业单位工资
  • 结转费用后利润怎么算
  • 房地产开发企业分为几个等级
  • 赠送的商品如何入账
  • 售楼部大楼
  • 以原材料投入资本
  • 非流动资产减少
  • 进出口企业需要哪些手续
  • 固定资产原价是指固定资产的什么
  • sqlserver高级教程
  • 2021win10激活
  • aeadisrv.exe
  • win8系统如何关闭杀毒系统
  • linux chkdsk
  • w10升级失败怎么办
  • 附件中的应用程序
  • win10系统出现问题怎么办
  • 关于javascript事件响应的基础语法总结(必看篇)
  • node-js
  • js实现返回顶部
  • JavaScript中的数据类型分为两大类
  • 浏览器环境下的事件循环
  • 国家税务局湖北省税务总局
  • 报废车税务怎么处理
  • 甘肃国家税务总局
  • 国家税务局几号上班
  • 餐饮财务分析表怎么写的啊
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设