z-filter-search v0.0.7

搜索组件

组件使用示例- 参考配置

<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>

搜索组件属性

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

ref defineExpose 方法

ref defineExpose 属性

组件事件