Vue+Naive+Ts自定义封装搜索栏，多搜索条件实现展开收起效果

后台项目多为增删改查，那么就会有不同搜索条件等，今天带大家实现一个自定义封装搜索组件，搜索条件多可展开收起，搜索，重置功能，技术栈用到了Vue+Ts+Naive组件库。先看下页面实现效果（展开&收起）：

家人们就长这样。现在看下我们的实现方式。

首先我们来封装这个组件，之后引入到列表的搜索组件中，（因为不同页面的输入框搜索以及字段不一样，所以在页面使用进行了二次组件使用）

列表页==》搜索栏==》搜索栏组件，下面是《搜索栏组件》代码：

<template>
  <div class="content">
    <div class="deflut">
      <div style="display: flex; margin-bottom: 10px">
        <slot name="deflutContent"></slot>
      </div>
      <div v-if="overflow">
        <slot name=