hf-search API

插槽

<hfSearch
    :search-option="searchOption"
    @search="search"
    @reset="reset"
    @search-item-change="searchItemChange"
    @get-ref="getRef"
    @delete-tag="deleteTag"
  >
    <template #yearSearch="scope">
      <el-input v-model="scope.searchValue.year" placeholder="这是插槽，绑定year" />
    </template>
  </hfSearch>

以prop+Search作为具名插槽的名称使用，如果是存在customerSlotName的，则以customerSlotName作为具名插槽的名称

事件

事件名	功能	回调参数	描述
search	搜索	搜索绑定值处理后的对象	可以保留此对象用于查询时的参数，已做数据隔离，查询后修改搜索项不会改变这个值
reset	重置	{search,searchValue}	拥有插槽时需要自实现插槽的重置逻辑，修改完searchValue后调用search方法进行查询
search-item-change	内置组件值变化	{prop,value}	内置组件值变化时触发，单个组件的赋值逻辑建议用配置项的format方法
get-ref	收集内置组件实例	以prop作为key值的组件实例对象	该方法会多次触发，每生成一个内置组件就会触发一次，调用页用一个对象承接，后续操作组件实例时直接通过prop获取该对象的实例
delete-tag	删除插槽生成的看板数据	{ tag, searchValue, search }	tag:{prop,lable,value,text}拥有插槽插在隐藏项中时需要自实现下方隐藏项看板的删除逻辑，修改完searchValue绑定值后，调用search方法进行查询

配置

属性名	作用	值	描述
getTags	隐藏项存在插槽时必填	function(prop,searchValue)	自实现查询时获取当前看板项数组的逻辑，返回一个数组[{prop,lable,value,text}],每次查询时隐藏项中有几个插槽就会调用几次
showItems	展示出来的搜索项	items数组	具体配置看items
hiddenItems	隐藏的搜索项	items数组	具体配置看items
immediate	是否改变时立即触发搜索	默认值false	目前存在问题是会多次触发search方法，后续在组件内部做节流处理一下
firstSearch	是否渲染完成后调用查询	默认值true

items配置

属性名	作用	值	描述
isSlot	是否插槽实现	string	可以结合type值是否为big决定插槽宽度为宽的，默认是和输入框一样的窄项
customerSlotName	自定义插槽名称	string	如果有值取值作为具名插槽名称，否则以prop+Search作为插槽名称
prop	组件唯一标识	string	绑定searchValue的key值，isSlot不为true时必填
format	自定义赋值方法	function(value,prop,searchValue)	默认的赋值方法是将值赋给searchValue的prop属性，如果有自己的赋值方法，则自己实现，可用于不同项之间的相互影响，例如AB项联动，需要自己实现searchValue[A]=value,并结合get-ref收集的实例去操作B实例
type	渲染内置组件类型	hf-search/components文件夹下的文件名	isSlot不为true时必填
label	搜索项名称	string	isSlot不为true时必填
placeholder	空值提示	string | undefined	默认不填会结合label做出提示
defaultValue	默认值		重置时会赋值为默认值
attrs	设置属性值	{...}	支持elementui组件的扩展，所有的属性都可以在这里面去赋值，具体结合elementui的组件属性去配置，
events	设置组件方法	{...}	支持elementui组件的扩展，所有的方法都可以在这里去追加，先执行组件内部的方法，例如在select组件中你传入一个events有change方法，但是组件内部也定义了@change，先执行内部方法，再执行events中的change
dicData	值数组	默认值[]	赋值于select;cascader;selectGroup的选项数组
dicProps	下拉值配置项	默认值{label:'label',value:'value'}	赋值于select;selectGroup的选项配置
typeDicData	值数组	默认值[]	赋值于selectInput;selectGroup的首下拉选项数组
typeDicProps	首下拉值配置项	默认值{label:'label',value:'value'}	赋值于selectInput;selectGroup的首下拉选项配置
getDicDataByType	获取联动子项数据方法	双下拉的必填	getDicDataByType(type,done,typeObj){...done(arr)}；回传参数：type:首下拉绑定的值，typeObj首下拉绑定值对应的对象，done：回调函数，拿到后面子项的数据后通过done回传给组件，赋值给dicData，也可自己去根据子组件的setOption方法去设置dicData
dontNeedDealValue	不处理对应的值	默认flase	如果设置为true，目前针对selectInput;selectGroup，则该项绑定值是什么查询时返回的对象就是什么

内置组件实例方法 （get-ref）

方法	参数	作用
reset		重置
getTags		获取当前实例在隐藏项中时，值对应的tags数组
setOption	setOption(key,value,currentValue)	更新组件配置，也用于组件配置项赋值，currentValue默认取defaultValue，组件绑定的value会更新为currentValue，隐藏项设置配置时会重新执行getTags方法，将tags推送到隐藏看板

新增内置组件

不需要引入，只需要在hf-search/components下新增文件，文件名称为新增的type类型即可； 原因是已在hfSearch组件中自动引入子组件

components的hook文件

created方法

传入props对象初始化参数

可选传append方法，会在执行完初始化后调用

返回 {data}对象，需要去解构得到data值,

例如：

data = created(props, undefined, (data: any) => {
  data.value = {
    typeValue: '',
    value: '',
  };
  if (data.option.typeDicData && data.option.typeDicData[0]) {
    data.value.typeValue = data.option.typeDicData[0][data.option.typeDicProps.value];
    typeValueChange(() => {
      data.value.value = props.defaultValue ? (props.defaultValue as any).value : '';
    });
  }
}).data;

defaultValueChange

默认的值变化触发事件，这里只处理了文本,下拉单选多选，传出去的值必须是{prop:'',label:'',value:''|[],valueText:''|[{prop:'',value:'',text:''}],} 如果值改变的方法和原有的逻辑一致，则直接引用defaultValueChange在值改变方法里调用就行

defaultGetTags

获取看板数组方法，也是只处理了文本和下拉的逻辑，如果逻辑一致可直接调用

defaultResetFn

默认的重置方法，如果能直接将默认值赋值给data.value则直接调用

组件需实现内容

1. 模板html
2. 引入hook，执行数据初始化，增加配置项watch
3. valueChange 值变化方法
4. getTages 生成看板数据
5. reset 重置方法
6. removeValueFromPanel看板删除数据时的相应操作
7. mounted的时候inject数据

    allRef = inject('allRef'); // 所有自定义组件实例
    parentOption = inject('selfOption'); // 父组件自己的配置，用于获取是否立即查询配置