van-filter-search

v0.1.13

Published

a year ago

A customizable filterSearch component base on vant for Vue.js 3.x.

Downloads

0High
0Medium
0Low

starlet0822

vant filter filter-search vue vue.js vue3-component vue-component

van-filter-search

van-filter-search for vant-ui.

this component is for vant4.x and vue3.x.

文档

https://starlet0822.github.io/van-filter-search

快速开始

1. ES module

安装

npm install --save van-filter-search
// or
yarn add van-filter-search
// or
pnpm add van-filter-search

注册

全局注册

import VanFilterSearch from "van-filter-search";

const app = createApp(App);
app.use(VanFilterSearch);

组件引入

<template>
  <van-filter-search></van-filter-search>
</template>

<script>
import { VanFilterSearch } from "van-filter-search";

export default defineComponent({
  components: {
    VanFilterSearch
})
</script>

使用

<script setup>
import { VanFilterSearch } from "van-filter-search";

const filterSearchRef = ref(null)
const fieldItems = ref([
  {
    type: 'InputField',
    title: '关键词查询',
    value: '',
    name: 'keyword',
    attrs: {
      placeholder: '输入搜索关键词'
    },
  },
  {
    type: 'RadioField',
    title: '任务状态',
    value: '0',
    name: 'status',
    attrs: {
      options: [
        { text: '未审核', value: '-1' },
        { text: '已审核', value: '0' },
        { text: '未通过', value: '1' },
        { text: '审核中', value: '2' },
        { text: '已退回', value: '3' }
      ],
    },
  },
  {
    type: 'CheckboxField',
    title: '紧急程度',
    value: [],
    name: 'level',
    attrs: {
      fieldNames: { text: 'label', value: 'id' },
      options: [
        { label: '重要', id: '0' },
        { label: '重要', id: '1' },
        { label: '紧急', id: '2', disabled: true },
        { label: '特急', id: '3' }
      ],
    },
  },
  {
    type: 'DateField',
    title: '创建时间',
    value: '',
    name: 'createTime',
    attrs: {
      placeholder: '选择时间'
    },
  },
])

const handleConfirm = (queryParams) => {
  // do something...
  // fetch data
}

onMounted(() => {
  console.log(filterSearchRef.value.getSelectedValues())
})
</script>

<template>
  <van-filter-search
    ref="filterSearchRef"
    :field-items="fieldItems"
    :show-header="true"
    @confirm="handleConfirm"
  ></van-filter-search>
</template>

<style lang="scss" scoped></style>

2. CDN

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>
  <script src="https://unpkg.com/van-filter-search"></script>
</head>

<body>
  <div id="app">
    <van-filter-search title="筛选条件" :field-items="fieldItems" show-header />
  </div>

</body>
<script>
  const App = {
    components: {
      VanFilterSearch: window['van-filter-search'].VanFilterSearch
    },
    data() {
      return {
        fieldItems: [
          {
            type: 'InputField',
            title: '关键词查询',
            value: '',
            name: 'keyword',
            attrs: {
              placeholder: '输入搜索关键词',
            },
          },
          {
            type: 'RadioField',
            title: '任务状态',
            value: '0',
            name: 'status',
            attrs: {
              options: [
                { text: '未审核', value: '-1' },
                { text: '已审核', value: '0' },
                { text: '未通过', value: '1' },
                { text: '审核中', value: '2' },
                { text: '已退回', value: '3' },
              ],
            },
          },
          {
            type: 'CheckboxField',
            title: '紧急程度',
            value: [],
            name: 'level',
            attrs: {
              options: [
                { text: '普通', value: '0' },
                { text: '重要', value: '1' },
                { text: '紧急', value: '2' },
                { text: '特急', value: '3' },
              ],
            },
          },
          {
            type: 'DateField',
            title: '创建时间',
            value: '',
            name: 'createTime',
            attrs: {
              placeholder: '选择时间',
            },
          },
        ]
      }
    },
  };
  Vue.createApp(App).mount('#app');
</script>

</html>

API

属性

| 参数 | 说明 | 类型 | 默认值 | | ------------------- | -------------------------------- | -------------------- | -------- | | field-items | 对象数组，配置选项类型显示的数据 | FormItemOption[] | [] | | title | 顶部栏标题 | string | 数据筛选 | | show-header | 是否显示顶部栏 | boolean | false | | show-close | 是否显示关闭图标 | boolean | true | | confirm-button-text | 按钮确认文字 | string | 确认 | | cancel-button-text | 取消按钮文字 | string | 取消 | | theme-color | 选项选中状态颜色 (暂不支持) | string | #2e6cf3 |

事件

| 事件名 | 说明 | 回调参数 | | ------- | ------------------ | -------------- | | confirm | 点击确认按钮时触发 | selectedValues | | cancel | 点击取消按钮时触发 | selectedValues | | close | 关闭弹窗时触发 | selectedValues |

插槽

| 名称 | 说明 | 参数 | | ---- | ---- | ---- | | | | | | | | |

方法

| 方法 | 说明 | 参数 | 返回值 | | ----------------- | --------------------- | ---- | -------------- | | confirm | 触发 confirm 事件 | - | - | | cancel | 触发 cancel事件 | - | | | getSelectedValues | 获取已选中的选项 | - | selectedValues |

FormItemOption 数据结构

| 键名 | 说明 | 类型 | | ----- | -------------------------------------------------------------------------------------------------- | ---------- | | type | 选项类型，可选值为 InputField RadioField CheckboxField DateField CellField | string | | title | 选项标题 | string | | value | 选项当前输入或选中的值 | any | | name | 选项字段名称，作为提交时的标识符 | string | | attrs | 当前对应选项组件属性 | - |

选项组件属性

InputField(输入框)

| prop | description | type | | ----------------- | -------------------------- | ---- | | VanField 的 props | 支持 VanField 所有属性 | - |

RadioField(单选项)

| 参数 | 说明 | 类型 | 默认值 | | ----------- | -------------------------------- | ------------ | ------------------------------- | | v-model | 当前选中的值 | any | - | | name | 选项字段名称，作为提交时的标识符 | string | - | | options | 对象数组，可选项数据源 | Option[] | [] | | field-names | 自定义 options 结构中的字段 | object | { text: 'text', value: 'value'} | | column-num | 每行显示几个选项 | number | string | | gutter | 选项之间的间距 | number | string |

CheckboxField(多选项)

| 参数 | 说明 | 类型 | 默认值 | | ----------- | -------------------------------- | ------------ | ------------------------------- | | v-model | 当前选中的值 | string[] | [] | | name | 选项字段名称，作为提交时的标识符 | string | - | | options | 对象数组，可选项数据源 | Option[] | [] | | field-names | 自定义 options 结构中的字段 | object | { text: 'text', value: 'value'} | | column-num | 每行显示几个选项 | number | string | | gutter | 选项之间的间距 | number | string |

CellField(排序项)

| 参数 | 说明 | 类型 | 默认值 | | ----------- | ----------------------------------------------- | ------------ | ------------------------------- | | v-model | 当前选中的值 | string | - | | name | 选项字段名称，作为提交时的标识符 | string | - | | options | 对象数组，可选项数据源 | Option[] | [] | | field-names | 自定义 options 结构中的字段 | object | { text: 'text', value: 'value'} | | column-num | 每行显示几个选项 | number | string | | gutter | 选项之间的间距 | number | string | | justify | 选项文本对齐方式，可选值为 center start | string | center |

DateField(日期选择)

| 参数 | 说明 | 类型 | 默认值 | | -------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | | v-model | 当前选中的日期 | string | - | | separator | 日期显示分隔符 | string | '-' | | VanFieldVanDatePickerVanPopup 的 props | VanField VanDatePicker VanPopup 属性 | 参考文档[VanField](https://vant-contrib.gitee.io/vant/#/zh-CN/field)VanDatePicker``VanPopup | - |

Option 数据结构

| 参数 | 说明 | 类型 | | --------- | ---------------------- | ----------- | | text | 选项文字内容 | string | | value | 选项对应的值 | any | | disabled | 是否禁用选项 | boolean | | className | 选项额外类名(暂未支持) | string |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

van-filter-search

文档

快速开始

1. ES module

安装

注册

全局注册

组件引入

使用

2. CDN

API

属性

事件

插槽

方法

FormItemOption 数据结构

选项组件属性

InputField(输入框)

RadioField(单选项)

CheckboxField(多选项)

CellField(排序项)

DateField(日期选择)

Option 数据结构