vue3怎么实现搜索项超过n行就折叠

背景

在现代 Web 应用中，搜索功能是不可或缺的一个特性。但是，在搜索面板中出现过多的选项会影响用户体验和页面的视觉效果。为了解决这个问题，我们可以实现一个搜索面板，在一定条件下折叠部分选项。

解决方案

基于 Vue 3，我们可以利用计算属性和指令来实现搜索面板选项的折叠。具体的思路如下：

第一步：准备数据

首先我们需要准备需要显示的所有搜索项，每个搜索项都拥有一个布尔值的属性 `visible`。当 `visible` 为 `true` 时，该项将被显示，否则将被折叠。

  
    data() {
      return {
        searchOptions: [
          {
            label: '搜索项1',
            visible: true
          },
          // ...其他搜索项
        ],
        maxVisibleOptions: 5 // 允许显示的最大搜索项数
      }
    }
  

第二步：计算属性筛选搜索项

接下来我们需要编写一个计算属性，用来筛选需要显示的搜索项。具体地，该属性将返回前 `maxVisibleOptions` 个可见的搜索项，以及一个布尔值，表示是否需要显示折叠按钮。

  
    computed: {
      optionsToShow() {
        const visibleOptions = this.searchOptions.filter(option => option.visible)
        const shouldCollapse = visibleOptions.length > this.maxVisibleOptions
        return {
          options: shouldCollapse ? visibleOptions.slice(0, this.maxVisibleOptions) : visibleOptions,
          shouldCollapse
        }
      }
    }
  

第三步：编写指令

我们现在可以编写一个指令，用来折叠和展开部分搜索项。当该指令被绑定到一个按钮上时，它将在点击时切换被绑定元素的 CSS 类，实现折叠和展开效果。

  
    directives: {
      collapse: {
        mounted(el, binding) {
          const wrapper = el.querySelector('.wrapper')
          const trigger = el.querySelector('.trigger')
          if (!wrapper || !trigger) return

          const expandClass = binding.value.expandClass || 'expanded'
          const collapseClass = binding.value.collapseClass || 'collapsed'

          trigger.addEventListener('click', () => {
            wrapper.classList.toggle(expandClass)
            wrapper.classList.toggle(collapseClass)
            trigger.innerText =
              wrapper.classList.contains(expandClass) ? '展开' : '收起'
          })
        }
      }
    }
  

第四步：加装指令

最后，我们将应用该指令到搜索面板上。当搜索选项超过 `maxVisibleOptions` 时，折叠按钮将自动出现。当用户点击折叠按钮时，部分搜索项将被折叠/展开。

  
    

      

        

          
          {{ option.label }}
        
      
      
收起
    
  

总结

在本文中，我们介绍了如何利用 Vue 3 实现搜索面板选项折叠的功能。具体地，我们需要准备数据、编写计算属性和指令、将指令应用到搜索面板上。我们还演示了一个简单的例子，并提供了具体的代码示例进行讲解。希望读者能通过本文的学习，掌握 Vue 3 实现折叠效果的技巧，为之后的前端学习和实践打下基础。