搜索框

基本用法

支持通过插槽对所有的可见元素，如输入框，新增按钮等进行自定义

WARNING

在触发created时，组件会保存modelValue的值做为后续重置操作的数据源，否则会默认清空所有的搜索条件

选项

至

<template>
  <bc-search
    v-model="params"
    :config="searchConfig"
    :search="handleSearch"
    create
    @create="handleCreate"
    @export="handleExport"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const searchConfig = ref([
  { catalog: 'input', name: '名称', prop: 'param.name' },
  { catalog: 'select', name: '选项', prop: 'param.option', options: [1, 2] },
  { catalog: 'datepicker', type: 'daterange', prop: 'date' },
])
const params = ref({
  param: {}
})

function handleSearch() {
  console.log(params.value)
  console.log('trigger search');
}

function handleExport() {
  console.log('trigger export');
}
function handleCreate() {
  console.log('trigger create', params.value);
}
</script>

Hide Source

默认值

对于需要动态更改默认搜索条件的，可以通过设置defalut-value来确保重置后的搜索条件会及时更新。或者也可以通过重写reset方法来手动维护重置的状态。

主要是为了处理重置状态与初始的查询状态不一致的问题，比如初始的查询参数部分来自路由，而重置时不需要这部分额外参数

TIP

对于重置时设置的值，优先使用default-value绑定的值，如果没有设置，会使用在created阶段通过v-model/modelValue传递的值。

{
  "page": 1,
  "size": 10,
  "name": "veneto"
}

<template>
  <pre>{{ params }}</pre>
  <bc-search
    v-model="params"
    :config="searchConfig"
    :search="handleSearch"
    :default-value="defaultValue"
  >
    <bc-button>测试</bc-button>
  </bc-search>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const searchConfig = ref([
  { catalog: 'input', name: '名称', prop: 'name' },
])
const params = ref({
  page: 1,
  size: 10,
  name: 'veneto',
})
const defaultValue = ref({
  page: 1,
  size: 10,
})

function handleSearch() {
  console.log('trigger search')
}
</script>

Hide Source

输入框标签

可以通过name-mode来决定标签的展示形式，是作为placeholder还是外部的label

名称

日期范围

至

<template>
  <bc-search
    v-model="params"
    :config="searchConfig"
    :search="handleSearch"
    create
    name-mode="label"
    @create="handleCreate"
    @export="handleExport"
  />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import type { RenderInputConfigType } from '@sepveneto/basic-comp'
export default defineComponent({
  name: 'Basic',
})
</script>

<script lang="ts" setup>
import { ref } from 'vue'
const searchConfig = ref<RenderInputConfigType[]>([
  { catalog: 'input', name: '名称', prop: 'param.name', placeholder: '请输入名称' },
  { catalog: 'datepicker', type: 'daterange', prop: 'date', name: '日期范围' },
])
const params = ref({
  param: {}
})

function handleSearch() {
  console.log(params.value)
  console.log('trigger search');
}

function handleExport() {
  console.log('trigger export');
}
function handleCreate() {
  console.log('trigger create', params.value);
}
</script>

Hide Source

属性

属性	说明	类型	可选值	默认值
v-model/modelValue	绑定值	object	-	-
name-mode	输入框标题的展示方式	string	'placeholder' | 'label'	'placeholder'
page-name	分页时当前页码的字段	string	-	'page'
default-value	重置时的默认值	object	-	-
create	是否显示新增按钮	boolean	-	false
config	搜索栏的可查询内容	config[]	-	-
search	搜索和重置触发时的回调函数	function	-	-
import	是否显示上传按钮	boolean	-	false
upload	文件上传的相关配置	object	-	-
export	是否显示导出按钮	boolean	-	true
layout	搜索栏默认按钮的布局	array	seach/reset/upload/export/create	['create', 'search', 'reset', 'upload', 'export'],

Config属性

名称	说明
prop	绑定值的字段（支持链式调用）
catalog	支持的搜索方式（input, select, datepicker）

TIP

不设置catalog时，可以通过对应prop的具名插槽自定义搜索方式

插槽

名称	说明
-	自定义搜索栏除自带的按钮外的其它功能
#prop	自定义对应prop的搜索框的内容
create	自定义新增按钮
search	自定义搜索按钮
reset	自定义重置按钮
export	自定义导出按钮
upload	自定义上传按钮

WARNING

上述的按钮目前在自定义后会失去原先的点击事件，诸如搜索、重置这些功能需要手动实现。

TIP

layout属性也会影响到自定义属性。如果需要完全的自定义，可以通过清空layout，在默认插槽中补充需要的内容

Source

Docs