Vue Filter Component Package

一个功能强大的 Vue 3 过滤器组件包，包含 FilterComponent 和 FilterDialog 两个组件，支持多种字段类型和操作符。

安装

npm install cd-vue-filter
# 或
yarn add cd-vue-filter
# 或
pnpm add cd-vue-filter

使用方法

全局注册

import { createApp } from 'vue'
import FilterComponents, { install } from 'cd-vue-filter'
import 'cd-vue-filter/dist/style.css'

const app = createApp(App)
app.use(install)

按需导入

import { FilterDialog, FilterComponent } from 'cd-vue-filter'
import 'cd-vue-filter/dist/style.css'

export default {
  components: {
    FilterDialog,
    FilterComponent
  }
}

组件说明

FilterDialog

弹窗式过滤器组件，支持复杂的多条件筛选。

Props

• visible (Boolean): 控制弹窗显示/隐藏
• fieldOptions (Array): 字段选项配置
• initialFilterCards (Array, 可选): 初始筛选卡片
• initialType1 (String, 可选): 初始类型

Events

• update:visible: 更新弹窗显示状态
• confirm: 确认筛选条件
• cancel: 取消筛选

使用示例

<template>
  <div>
    <t-button @click="showDialog = true">打开筛选</t-button>
    <FilterDialog
      v-model:visible="showDialog"
      :field-options="fieldOptions"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { FilterDialog } from 'cd-vue-filter'

const showDialog = ref(false)

const fieldOptions = [
  {
    label: '姓名',
    value: 'name',
    type: 'text'
  },
  {
    label: '年龄',
    value: 'age',
    type: 'number'
  },
  {
    label: '创建时间',
    value: 'createTime',
    type: 'date'
  }
]

const handleConfirm = (filterData) => {
  console.log('筛选条件:', filterData)
  showDialog.value = false
}

const handleCancel = () => {
  showDialog.value = false
}
</script>

FilterComponent

内联式过滤器组件，适用于简单的单条件筛选。

Props

• fieldOptions (Array): 字段选项配置
• filterCondition (Object): 筛选条件
• selectOptions (Object, 可选): 下拉选项数据

Events

• update:filterCondition: 更新筛选条件

字段类型支持

• text: 文本类型
• number: 数字类型
• money: 金额类型
• date: 日期类型
• datetime: 日期时间类型
• select: 下拉选择
• province: 省市区级联选择

操作符支持

根据字段类型自动提供相应的操作符：

• 文本类型: 等于、不等于、包含、不包含、为空、不为空
• 数字类型: 等于、不等于、大于、小于、大于等于、小于等于、为空、不为空
• 日期类型: 等于、不等于、大于、小于、大于等于、小于等于、为空、不为空
• 选择类型: 等于、不等于、包含、不包含、为空、不为空

版本历史

• 1.1.0: 添加 FilterDialog 组件支持，同时保持 FilterComponent 兼容性
• 1.0.x: 初始版本，包含 FilterComponent 组件

许可证

MIT