搜索组件

组件使用示例- 参考配置

<template>
 <div>
   <z-filtersearch v-model="form"   ref="dom" :col="8" :gutter="10" :options="list" @reset="handleReset" @confirm="handleConfirm">
     <template #ELINPUT:name:append>
       {{ h1 }}
     </template>
     <template #ELINPUT:firstName:append>
       {{ h1 }}
     </template>
     <template #ZSLIDESELECT:slideselect:default>
         <el-option

             v-for="item in list[0].componentAttrs.list"
             :key="item.value"
             :label="item.label"
             :value="item.value"
             />
         </template>
     <template #ELSELECT:option:default>
       <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
     </template>
   </z-filtersearch>
 </div>
</template>

<script setup lang="ts">
import { ref, h,  onMounted, reactive, watch } from "vue";
const h1 = ref("A");
const dom = ref()
const options = [
 {
   value: "Option1",
   label: "Option1",
 },
 {
   value: "Option2",
   label: "Option2",
 },
];
let form = ref({
 name: '测试form建立',
 firstName: '2',
 slideselect: [1, 5],
 option: 'option2',
 'date-picker': new Date(),
 slider: 3,
 "time-picker": new Date(),
 switch: false
})
let list = ref([
{
   type: "z-slideselect",
   key: "slideselect",
   label: "自定义",
   labelWidth: "60px",
   componentAttrs: {
     placeholder: '自定义组件',
     list: [{label: '1-2', value: '1-2'}, {label: '2-3', value: '2-3'}],
     step: 1,
     min: 1,
     max: 5,
     useUnits: false,
     unit: []
   },
   slots: ["default"],
   componentSlot: {
   //   prepend: h("div", {}, "前"),
   },
   componentEvent: {
     clear: (e: any) => {
       console.log(e, "clear");
     },
     change: (e: any) => {
       console.log(e, "change");
     },
     input: (e: any) => {
       console.log("----", e);
     },
   },
 },
 {
   type: "el-input",
   key: "name",
   label: "名称",
   labelWidth: "60px",
   componentAttrs: {
     type: "text",
     value: "",
   },
   slots: ["append"],
   componentSlot: {
     prepend: h("div", {}, "前"),
   },
   componentEvent: {
     blur: (e: any) => {
       console.log(e, "blur");
     },
     input: (e: any) => {
       console.log("----", e);
     },
   },
 },
 {
   type: "el-input",
   key: "firstName",
   label: "名称1",
   componentAttrs: {
     type: "text",
     value: "",
   },
   slots: ["append"],
   componentSlot: {
     prepend: h("div", {}, "前"),
   },
   componentEvent: {
     blur: (e: any) => {
       console.log(e, "blur");
     },
     input: (e: any) => {
       console.log("----", e);
     },
   },
 },
 {
   type: "el-select",
   key: "option",
   componentAttrs: {
     value: "Option2",
   },
   slots: ["default"],
   componentSlot: {
     prefix: h("div", {}, "前"),
   },
   componentEvent: {
     blur: (e: any) => {
       console.log(e, "blur");
     },
     input: (e: any) => {
       console.log("----", e);
     },
   },
 },
 {
   type: "el-slider",
   key: "slider",
   componentAttrs: {
     value: 3,
     step: 1,
     min: 1,
     max: 10,
   },
   componentSlot: {},
   componentEvent: {
     change: (e) => {
       console.log(e, "change");
     },
     input: (e) => {
       console.log("----", e);
     },
   },
 },
 {
   type: "el-switch",
   key: "switch",
   labelWidth: "140px",
   label: "填充一下比较好看",
   componentAttrs: {
     value: false,
     style: "--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949",
   },
   componentSlot: {},
   componentEvent: {
     change: (e: any) => {
       console.log(e, "change");
     },
   },
 },
 {
   type: "el-time-picker",
   key: "time-picker",
   componentAttrs: {
     value: new Date(),
     placeholder: "时间",
   },
   componentSlot: {},
   componentEvent: {
     change: (e: any) => {
       console.log(e, "change");
     },
   },
 },
 {
   type: "el-date-picker",
   key: "date-picker",
   componentAttrs: {
     value: new Date(),
     placeholder: "时间",
     shortcuts: [
       {
         text: "Today",
         value: new Date(),
       },
       {
         text: "Yesterday",
         value: () => {
           const date = new Date();
           date.setTime(date.getTime() - 3600 * 1000 * 24);
           return date;
         },
       },
     ],
   },
   componentSlot: {},
   componentEvent: {
     change: (e: any) => {
       console.log(e, "change");
     },
   },
 },
]);


const handleReset = (oldform: any) => {

 console.log(oldform,  form)
}
const handleConfirm = () => {
 console.log(form, 'handleConfirm', dom.value)
}



</script>

搜索组件属性

| 属性 | 描述 | 备注 | | --------------- | :-------------------- | :---------------------: | | gutter | 组件间隔 | number | | onFilter | labelWidth提示宽度，已配置label有效 | string | | options | 组件配置列表 | 参考element plus component Extra Attr | | col | 平铺个数 | 以24格切分 | | showDown | 未支持 | | | confirmText | 确认文案 | string | | resetText | 重置文案 | string | | showConfirm | 是否展示确认 | boolean | | showReset | 是否展示重置 | boolean |

element plus 组件额外添加的属性 - Array item

| 属性 | 描述 | 备注 | | --------------- | :------------ | :----------: | | type | 对应各类element form组件 | string | | key | 对应参数key | string | | label | 输入提示 | string非必填 | | componentAttrs | element-plus 组件配置 | Object | | labelWidth | string 提示宽度 | string 非必填 | | componentEvent | element-plus 组件配置 | Object 查看 element-plus| | componentSlot | element-plus 组件slot配置 | Object | | slots | slot name对应拓展，参考实例 | Array[string] |

ref defineExpose 方法

| 方法 | 描述 | 备注 | | --------------- | :------------ | :----------: | | onReset | 重置 | Function | | onConfirm | 确定 | Function |

ref defineExpose 属性

| 方法 | 描述 | 备注 | | --------------- | :------------ | :----------: | | form | 返回表单选择结果 | Object |

组件事件

| | 描述 | 备注 | | --------------- | :------------ | :----------: | | change | 筛选变化 | 返回表单选择结果 | | reset | 重置 | 返回表单选择结果 | | confirm | 确认 | 返回表单选择结果 | | update | 更新 | 返回表单选择结果 |