拓展searchBox组件类型

主要是用use组件库的时候，给第二个参数对象传了相关的配置数据searchBoxComponent,这用在注册组件的时候，会把这个配置数据通过app.provide注入的方式传给searchBox，和内置的类型冲突的情况下，已配置的为准

import { createApp } from 'vue'
import CingtaComponent from 'cingta-component';
const componentConfig = {
  searchBoxComponent: {
    0: 'ct-input',
    15: 'a',
    16: 'el-tree',
  }
}
const app = createApp(App);
app.use(CingtaComponent, componentConfig);

基础用法

• 这里展示了两种样式。一种是内边框一种是外边框，通过outerBorder来控制
• 同时这里也展示了通过row-number来设置一行放的数量

有重置按钮

插槽组件用法

searchBox组件的属性

属性名	说明	类型	默认值
model-value / v-model	绑定的值，不是必须要有的,这个字段是同步点击查询后的查询条件	Object	-
search-list	具体的查询列表，下面会给出一项查询里面的属性说明	Array	-
row-number	一行放的查询条件的数	Number	5
outer-border	是否外置边框	Boolean	true
have-reset	是否有重置按钮	Boolean	-
search-btn-name	查询按钮的名称	String	查询

一项查询组件的属性

除了查询组件通用,还有以下属性

属性名	说明	类型	默认值
required	是否必填标志	Boolean	-
list	select组件的options	Array	-
componentName	组件主体的插槽名，没有会取param字段	String	-
componentClass	一项组件自定义的class类名	String / Array	-
componentStyle	一项组件自定义的Style类名	Object	-

searchBox组件的事件

事件名	说明	回调参数
doSearch	点击查询事件	searchParams:查询条件
doReset	点击重置事件	-

组件库默认type对应的组件

type值	对应组件
0	输入框组件（CtInput）
1	选择器组件（CtSelect）
2	级联组件（CtCascader）
4	日期选择组件CtDatePicker
12	年份范围组件CtDatePicker
13	普通div,可用做插槽组件

searchBox组件的插槽

插槽名	说明
-	一项查询项的所有内容的插槽，作用域参数为当前查询项所有传入的数据 {param,label,type,...}
item-before	一项查询项的前置插槽，在显示的label前，作用域参数为当前查询项所有传入的数据 {param,label,type,...}
item-after	一项查询项的后置插槽，在查询组件后，作用域参数为当前查询项所有传入的数据 {param,label,type,...}
componentName/param	动态插槽名，名字为当前查询项数据的componentName或param，用于插槽组件或任何想重新替换原始查询组件的地方，作用域参数为当前查询项所有传入的数据 {param,label,type,...}
solt-search	自定义查询按钮（包括了重置按钮）的插槽

searchBox组件的Expose

属性名	说明	类型
searchParamsCurrent	当前的查询条件	RefImpl
componentAll	searchBox所有类型的查询组件对象	Object
getComponent	通过传入type来获取type对应的组件	Function
buriedParams	searchBox的埋点数据	RefImpl