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依赖注入的方法来传递。

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui