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

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

面板标题字体大小，优先级高于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>