用Vue3写的目录组件，支持搜索过滤，展开收起（附源码）

良月柒

于 2024-04-24 10:51:31 发布

阅读量469

点赞数 9

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/lkp1603645756/article/details/138152163

版权

在现代的 Web 开发中，组件化开发已经成为了主流。Vue3 作为一款流行的前端框架，在组件化方面提供了丰富的支持。

在本文中，我将深入探讨一个自定义目录组件的实现，并介绍其中涉及的技术点和最佳实践。

引言

目录组件是一种常见的 UI 控件，用于展示文档或内容的结构，帮助用户快速导航到感兴趣的部分。在本文中，我将分享一个用 Vue3 实现的自定义目录组件，探讨其设计思路和技术实现。

组件结构与功能

组件结构

目录组件主要由两个部分组成：目录头部和目录内容。目录头部显示目录的标题和展开/收起按钮，而目录内容则显示具体的目录条目。

组件功能

展开/收起功能： 用户可以点击头部按钮展开或收起目录内容。
搜索过滤功能： 用户可以输入关键字对目录进行过滤，只显示符合条件的条目。

组件属性与默认值设置

在实现目录组件时，我们需要考虑到以下几个属性：

cmdList: 用于传入目录数据，包含了目录的结构信息。
customStyle: 用于自定义组件的样式。
className: 用于设置组件的类名，影响组件的展示样式。

在 Vue3 中，我们可以使用 defineProps 来定义组件的属性，并为每个属性设置默认值。通过设置 cmdList 和 customStyle 的默认值，我们可以确保组件在未传入属性时有一个良好的备选方案。

// 在 Vue3 中使用 defineProps 来定义组件属性，并设置默认值
const props = defineProps({
  cmdList: {
    type: Object,
    default: () => ({})
  },
  customStyle: {
    type: Object,
    default: () => ({})
  }
});

组件状态管理与事件处理

目录组件的展开/收起状态以及搜索关键字的过滤功能都需要进行状态管理。在 Vue3 中，我们可以使用 ref 来定义响应式变量，并使用 setup 函数来初始化组件状态。

通过监听 DOM 事件，并在事件处理函数中修改组件状态，我们可以实现目录的交互功能。

// 使用 ref 定义响应式变量
const isExpanded = ref(true);
const filterText = ref('');

// 监听展开/收起按钮点击事件
function handleSwitch() {
  isExpanded.value = !isExpanded.value;
}

// 监听搜索关键字输入事件
function handleFilterKeywordChange() {
  // 处理搜索逻辑
}

样式设计与技巧

最后，我们需要为目录组件设计合适的样式，以确保其在页面中的美观和易用性。在本文中，我使用了 CSS 来编写组件的样式，并采用了一些常见的样式技巧，如使用 Flexbox 布局和设置过渡效果。

滚动条样式：

/* 滚动条整体样式 */
::-webkit-scrollbar {
    width: 8px; /* 滚动条宽度 */
}

/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* 滚动条轨道背景色 */
    border-radius: 6px; /* 滑块圆角 */
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
    background-color: #797979; /* 滚动条滑块颜色 */
    border-radius: 6px; /* 滑块圆角 */
    border: 3px solid #f1f1f1; /* 滑块边框样式 */
}

/* 鼠标悬停在滚动条上时的样式 */
::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* 滚动条滑块悬停时的颜色 */
}

目录列表样式：

.document-catalogue ul {
  margin: 0 0 5px -27px;
  font-size: 12px;
}

.document-catalogue li {
  margin-top: 3px;
  list-style: none;
}

.document-catalogue li::before {
  content: "\2022"; /* 使用实心圆作为点的内容 */
  color: #989aa1; /* 设置点的颜色为红色 */
  display: inline-block; /* 将点设置为行内元素 */
  width: 1em; /* 设置点的宽度 */
  margin-right: 0.1em; /* 设置点与文字之间的间距 */
}