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="content"></slot>
      </div>
    </div>
    <div v-if="!type" class="search">
      <n-button type="info" color="#8a2be2" @click="getSearch(1)"> 查询 </n-button>
      <n-button style="margin: 0 12px" @click="getSearch(2)"> 重置 </n-button>
      <n-button v-if="props.overflowShow" color="#8a2be2" text icon-placement="right" @click="unfoldToggle">
        <template #icon>
          <n-icon v-if="overflow" size="18" class="unfold-icon">
            <icon-local-zk class="text-24px" />
          </n-icon>
          <n-icon v-else size="18" class="unfold-icon">
            <icon-local-sq class="text-24px" />
          </n-icon>
        </template>
        {{ overflow ? "收起" : "展开" }}
      </n-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { defineProps, ref } from "vue";
const overflow = ref(false);
const props = defineProps({
  overflowShow: {
    type: Boolean,
    default: true
  },
  type: {
    type: Boolean,
    default: true
  }
});
const show = ref(false);
const emit = defineEmits(["getSearch", "clearcontents"]);
const getSearch = (val: Number) => {
  if (val === 1) {
    emit("getSearch");
  } else {
    emit("clearcontents");
  }
};
const unfoldToggle = () => {
  overflow.value = !overflow.value;
};
</script>

就是我们的一个Form组件了,一般我们会放到Vue的src下的components公共组件库下面。之后我们在列表页使用,组件给我们传入两个方法:getSearch搜索与clearcontents重置,来看下我们在页面怎么使用吧(记得引入我们上面的组件哦!!!)《搜索栏》==》

//根据方法来给列表页传入搜索参数
const getSearch = () => {
  emit("getSearch", model);
};

const clearcontents = () => {
  Object.assign(model, {
    value: null,
  });
  emit("getSearch", model);
};

使用了插槽来插入我们的输入框,小编使用了grid来进行布局,具体插入内容大家可以自行根据需求来做哈!

之后在我们列表页引入使用啦!

<SearchFrom @getSearch="getSearch" />

import SearchFrom from "./components/searchFrom.vue";

//搜索参数
let model = reactive({
  valve: null,//等等等。。。
});

// 查询
const getSearch = (models) => {
//替换上我们输入的参数
  model = { ...models };
  getRequestData();
};

这样我们的一个搜索栏组件封装与使用和列表查询就好啦!具体细节没有在开发中可以补充哦!

今天的分享就到这里啦。

  • 15
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值