Element Plus 组件库实现:2. Collapse(2)

前言

上篇文章已经介绍了Collapse组件的大概实现方案及思路,Element Plus 组件库实现:2. Collapse(1) - 掘金 (juejin.cn),本文将简单介绍实现具体实现。

Collapse组件实现

html 复制代码
// 先引入需要用到的接口或方法
<script setup lang="ts">
import { ref, provide, watch } from 'vue';
import { collapseContextKey } from './types';
import type { NameType, CollapseProps, CollaspeEmits } from './types';

defineOptions({
    name: 'YvCollapse'
})
const props = defineProps<CollapseProps>()
const emits = defineEmits<CollaspeEmits>()
</script>

对应上篇文章的设计思路:

  • 在Collapse组件中用一个数组来保存打开的item的name属性
ts 复制代码
const activeNames = ref<NameType[]>(props.modelValue)
// 因为初始值为props.modelValue,来自父组件,所以这里还需要来设置一个监听以保证数据响应式
watch(() => props.modelValue, () => {
    activeNames.value = props.modelValue
})
  • 点击item的时候,先在数组中实现了打开和关闭的状态改变
ts 复制代码
const handleItemClick = (item: NameType) => {
    // 找到当前点击列表的索引值
    const index = activeNames.value.indexOf(item)
    // 先来到手风琴效果分支
    if (props.accordion) {
        // 如果点击的是展开项,那就清空激活数组,否则替换,这样就保证了只有一项被激活
        activeNames.value = [activeNames.value[0] === item ? '' : item]
    } else {
        if (index > -1) {
            // 存在, 删除相应的一项
            activeNames.value.splice(index, 1)
        } else {
            // 不存在, 插入相应的一项
            activeNames.value.push(item)
        }
        // console.log(activeNames.value)
    }
    // 派发事件,让父组件知道数据被改变
    emits('update:modelValue', activeNames.value)
    emits('change', activeNames.value)
}
  • 这个数组将由Collapse组件传递给CollapseItem

这里由于使用的slot,所以不能再使用prop来向子组件传递属性和方法,要用到provideinject依赖注入的方法来传递:

ts 复制代码
// Symbol("collapseContextKey") 创建了一个唯一的符号,用于作为这个注入键
export const collapseContextKey: InjectionKey<CollapseContext> = Symbol("collapseContextKey");
ts 复制代码
// Collapse.vue
provide(collapseContextKey, {
    activeNames,
    // 将方法也传递到CollapseItem中,在点击Item列表时调用
    handleItemClick
})

CollapseItem组件实现

html 复制代码
// CollapseItem.vue
<script setup lang="ts">
import { inject, computed } from 'vue';
import { collapseContextKey } from './types';
import type { CollapseItemProps } from './types';

defineOptions({
    name: "YvCollapseItem"
})
const props = defineProps<CollapseItemProps>()
</script>


<template>
    <div class="yv-collapse-item" :class="{
        'is-disabled': props.disabled
    }">
        <div class="yv-collapse-item__header" :class="{
            'is-disabled': disabled,
            'is-active': isActive

        }" :id="`item-header-${props.name}`" @click="handleClick">
            <slot name="title">{{ title }}</slot>
        </div>
            <div class="yv-collapse-item__wrapper" v-show="isActive">
                // 这里绑定个id属性,使每个列表有唯一的id
                <div class="yv-collapse-item__content" :id="`item-content-${props.name}`">
                    <slot></slot>
                </div>
            </div>
    </div>
</template>

这个时候,子组件要做的事情显而易见了 => 根据父组件Collapse传递过来的状态数组activeNames,决定展示或隐藏相应的列表项,对应上篇文章的设计思路:

  • 然后在Item组件内部,也就是CollapseItem组件内部,判断name是否存在于数组中,使用一个计算属性结合v-show,真正实现打开和关闭
ts 复制代码
// 接受祖先组件传递过来的参数,默认值为undefined
const collapseContext = inject(collapseContextKey, undefined)
// 根据是否被添加到数据进行显示/隐藏处理
const isActive = computed(() => collapseContext?.activeNames.value.includes(props.name))
const handleClick = () => {
    // 禁用状态下当然就直接返回了
    if (props.disabled) { return }
    // 触发点击,并把当前列表独有的name属性传递给Collapse
    collapseContext?.handleItemClick(props.name)
}

这样,两个组件的就基本实现,关于样式和动画,不再赘述,也不是本文重点。

总结

本文通过结合上篇文章Element Plus 组件库实现:2. Collapse(1) - 掘金 (juejin.cn)的方案及思路完成了对Collapse组件和CollapseItem组件的具体实现,需要注意的是,这里的传递数据需要通过provideinject依赖注入的方法来传递。

相关推荐
努力只为躺平2 分钟前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript
bitbitDown3 分钟前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
阿里云大数据AI技术3 分钟前
Post-Training on PAI (3): 自研高性能强化学习框架PAI-ChatLearn
人工智能·开源·强化学习
陈随易8 分钟前
VSCode v1.102发布,AI体验大幅提升
前端·后端·程序员
ma7712 分钟前
JavaScript 获取短链接原始地址的解决方案
前端
该用户已不存在12 分钟前
关于我把Mac Mini托管到机房,后续来了,还有更多玩法
服务器·前端·mac
tianchang15 分钟前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式
闲蛋小超人笑嘻嘻16 分钟前
前端面试十一之TS
前端
摆烂为不摆烂16 分钟前
😁深入JS(四): 一文让你完全了解Iterator+Generator 实现async await
前端
DoraBigHead29 分钟前
🧠 别急着传!大文件上传里,藏着 Promise 的高级用法
前端·javascript·面试