@fesjs/traction-widget

Appearance

Return to top
On this page

BSearch

搜索框组件，集成搜索通用功能

组件注册

js
import { BSearch } from '@fesjs/traction-widget';
app.use(BSearch);

代码演示

基础用法

搜索框组件，内置查询、重置、高级搜索按钮，可额外配置其余按钮

  • 高级筛选，自带【已选x项】功能
  • 重置，可一键清空查询表单和高级筛选表单
Play
<template>
    <BSearch v-model:form="searchForm" v-model:advanceForm="advanceSearchForm" :isAdvance='true'
                @search="handleSearch" @reset="handleReset" @advance="toggleAdvanceQuery">
        <template v-slot:form>
            <div>
                <span class="condition-label">姓名</span>
                <FInput v-model="searchForm.name" placeholder="请输入">
                </FInput>
            </div>
            <div>
                <span class="condition-label">年龄</span>
                <FInput v-model="searchForm.age" placeholder="请输入">
                </FInput>
            </div>
            <div>
                <span class="condition-label">性别</span>
                <FSelect v-model="searchForm.gender" :options="genderList"
                        placeholder="请选择" clearable filterable>
                </FSelect>
            </div>
        </template>
        <template v-slot:exButton>
            <FButton @click="handleEX">额外按钮1</FButton>
            <FButton @click="handleEX">额外按钮2</FButton>
        </template>
    </BSearch>
    <FModal :maskClosable="false" title="高级筛选" :show="showAdvanceQuery" @cancel="advanceCancel" @ok="advanceCancel">
        <FForm>
             <FFormItem label="手机号码">
                <FInput v-model="advanceSearchForm.mobile" placeholder="请输入手机号码"></FInput>
            </FFormItem>
             <FFormItem label="爱好">
                <FSelect v-model="advanceSearchForm.hobby" :options="hobbyList"
                        placeholder="请选择" clearable filterable multiple>
                </FSelect>
            </FFormItem>
            <FFormItem label="宗教信仰">
                <FRadioGroup v-model="advanceSearchForm.faith">
                        <FRadio :value="true">是</FRadio>
                        <FRadio :value="false">否</FRadio>
                </FRadioGroup>
            </FFormItem>
        </FForm>
    </FModal>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { BSearch } from '@fesjs/traction-widget';
import { FSelect, FInput, FButton, FModal, FForm, FFormItem, FDatePicker, FRadioGroup, FRadio } from '@fesjs/fes-design';

const searchForm = ref({
    name: '',
    age: '',
    gender: '',
})
const advanceSearchForm = ref({
    mobile: '',
    hobby: [],
    faith: null,
})
const genderList = [
    {
        label: '女',
        value: 'woman'
    },
    {
        label: '男',
        value: 'man'
    }
]
const hobbyList = [
    {
        label: '篮球',
        value: 'basketball'
    },
    {
        label: '游泳',
        value: 'swim'
    },
    {
        label: '桌游',
        value: 'BRPG'
    }
]
const handleSearch = (e: any) => {
    console.log('handleSearch-查询操作', e);
}

const showAdvanceQuery = ref(false);
const toggleAdvanceQuery = () => {
    showAdvanceQuery.value = true;
};
const advanceCancel = () => {
    showAdvanceQuery.value = false;
}
const handleReset = () => {
    console.log('内置了顶部搜索和高级筛选的清空');
    
}
const handleEX = () => {
    console.log('handleEX');
};
</script>
查看代码

自定义模式

自定义高级筛选计数函数，自定义重置函数默认值。

  • 使用isCustomAdvanceCount声明自定义高级筛选的计数后，必须传参advanceCountFunc传自定义计数函数，否则计数失效。
Play
<template>
    <BSearch v-model:form="searchForm" v-model:advanceForm="advanceSearchForm" :isResetAllClear="false"
                :isAdvance='true' :isCustomAdvanceCount='true'  :advanceCountFunc="handleCustomAdvanceCount"
                @search="handleSearch" @reset="handleReset" @advance="toggleAdvanceQuery">
        <template v-slot:form>
            <div>
                <span class="condition-label">姓名</span>
                <FInput v-model="searchForm.name" placeholder="请输入">
                </FInput>
            </div>
        </template>
    </BSearch>
    <FModal :maskClosable="false" title="高级筛选" :show="showAdvanceQuery" @cancel="advanceCancel" @ok="advanceCancel">
        <FForm>
             <FFormItem label="手机号码">
                <FInput v-model="advanceSearchForm.mobile" placeholder="请输入手机号码"></FInput>
            </FFormItem>
             <FFormItem label="爱好">
                <FSelect v-model="advanceSearchForm.hobby" :options="hobbyList"
                        placeholder="请选择" clearable filterable multiple>
                </FSelect>
            </FFormItem>
            <FFormItem label="宗教信仰">
                <FRadioGroup v-model="advanceSearchForm.faith">
                        <FRadio :value="true">是</FRadio>
                        <FRadio :value="false">否</FRadio>
                </FRadioGroup>
            </FFormItem>
        </FForm>
    </FModal>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { BSearch } from '@fesjs/traction-widget';
import { FSelect, FInput, FButton, FModal, FForm, FFormItem, FDatePicker, FRadioGroup, FRadio } from '@fesjs/fes-design';
import { isBoolean } from 'lodash-es';

const searchForm = ref({
    name: '',
})
const initAdvanceSearchForm = () => ({
    mobile: '',
    hobby: [],
    faith: null,
})

const advanceSearchForm = ref(initAdvanceSearchForm())

const handleCustomAdvanceCount = (advanceFormData:any) => {
    return Object.values(advanceFormData).filter((item) => {
        if (item === 0) return true;
        if (Array.isArray(item) && item.length === 0) return false;
        return !!item;
    }).length;
};
const handleReset = () => {
    searchForm.value.name = '姓名默认值'
    advanceSearchForm.value = initAdvanceSearchForm()
    console.log('自行编写清除逻辑');
    
}

const hobbyList = [
    {
        label: '篮球',
        value: 'basketball'
    },
    {
        label: '游泳',
        value: 'swim'
    },
    {
        label: '桌游',
        value: 'BRPG'
    }
]
const handleSearch = (e: any) => {
    console.log('handleSearch-查询操作', e);
}

const showAdvanceQuery = ref(false);
const toggleAdvanceQuery = () => {
    showAdvanceQuery.value = true;
};
const advanceCancel = () => {
    showAdvanceQuery.value = false;
}
const handleEX = () => {
    console.log('handleEX');
};

</script>
查看代码

参数说明

Search Props

属性说明类型默认值是否必须
form查询表单数据Object{}是
advanceForm高级筛选表单数据Object{}否
isAdvance是否展示高级筛选按钮Booleanfalse否
isAdvanceCount是否统计高级筛选已填数量Booleantrue否
isCustomAdvanceCount是否自定义高级筛选统计数量方法Booleanfalse否
advanceCountFunc自定义高级筛选计数函数Function(advanceForm) => {}否
isReset是否展示重置按钮Booleantrue否
isResetAllClear点击重置后是否做自动清空Booleantrue否
isLetgo是否为letgo开发Booleanfalse否

Search Events

事件名称说明回调参数
search点击查询按钮当前form的值
reset点击重置按钮-
advance点击高级筛选按钮-

Search Slots

名称说明参数
form查询表单内容-
exButton额外按钮内容-

注意事项

  1. 关于高级筛选的已选x项统计功能： 若值为布尔类型，如果为true和false，都正常统计+1， 若值为数字0，也正常统计+1， 若值为空字符串或者空数组，不统计。
  2. 关于重置功能： 若值为布尔类型，重置为null, 若值为数组，重置为[], 若值为对象，重置为{}, 其余情况，均默认重置为空字符串。
  3. 搜索表单有内置样式，需自行声明class为"condition-label"
js
<div>
    <span class="condition-label">姓名</span>
    <FInput v-model="searchForm.name" placeholder="请输入">
    </FInput>
</div>

Released under the MIT License.

Copyright © webank