Administrator
Administrator
Published on 2025-04-08 / 1 Visits
0
0

Collapse组件实现

1. 需求分析

  • 可以通过点击标题进行隐藏\显示折叠内容

  • 可以动态嵌入输入内容,输入内容可为文本可谓HTML文本

  • 需要有收起展开过渡动画

  • 拥有两种模式,一种最多只能打开一个,一种可以打开多个

  • 需要进行双向绑定

2. 编码实现

2.1. 组件结构

2.2. 总体思路

动态嵌入HTML需要使用插槽,分为head和content,进行不同部分的插入,需要使用具名插槽。过渡动画需要使用vue提供的组件transition进行包裹,同时设置对应的css样式,折叠展开动画使用slide较好。需要设计一对组件Collapse内含多个CollapseItem,实现展开、折叠交互需要使用emit方法。父组件需要管理激活记录,需要维护一个激活数组,同时提供点击方法,规定激活的业务流程。子组件需要获取激活状态、激活方法,父组件通过provide提供激活方法和激活状态,子组件通过inject注入属性。实现双向绑定和激活交互。

2.3. 动态嵌入HTML实现

模板设置具名slot,父组件通过<template #name>指定插入插槽

2.4. 过渡动画实现

通过引用过渡动画钩子,每个阶段设置对应的展开收起样式

2.5. 双向绑定和交互实现

props从外部获取参数,定义交互方法,若为手风琴模式,则保证数组中只有一个元素,若重复点击一个元素则将其删除。

外部双向绑定数据v-model根据vue的v-model描述,其为如图简写。变为props传入searchtext和绑定更新事件update:modelValue。

需要注意,使用watch监听props的值,不然异步变化无法响应。

通过privide提供交互方法和激活数组

子组件注入对应属性方法进行激活


Comment