PenSearch 搜索栏组件

代码示例

<template>
    <!-- 搜索栏 -->
    <pen-search v-model="search" :options="searchOptions"></pen-search>
</template>

<script setup lang="ts">
// 搜索栏
const searchOptions = defineSearch([
  {
    type: SearchTypes.Button,
    label: '添加',
    props: {
      type: 'primary',
      onClick: () => {
        console.log('添加')
      }
    }
  },
  {
    type: SearchTypes.Input,
    field: 'keyword',
    label: '关键词',
    align: 'right',
    props: {
      placeholder: '请输入关键词',
      clearable: true,
      style: {
        width: '200px'
      }
    }
  },
])

// 使用工具函数生成初始数据
const search = ref(generateSearchData(searchOptions));
</script>

插槽

插槽名	说明
[field]-label	label名称自定义，[field]为具体字段名，如：keyword-label
[field]	[field]为具体字段名，如：keyword，该插槽只有当 type 为 SearchTypes.Custom 时才可用

<template>
    <pen-search v-model="search" :options="searchOptions">
        <template #keyword-label>
            <span>自定义关键词</span>
        </template>
        <template #keyword>
            <span>自定义搜索表单</span>
        </template>
    </pen-search>
</template>

属性类型

import type { ButtonProps, InputProps, ISelectProps } from 'element-plus';
import type { Ref, ComputedRef } from 'vue';

export enum SearchTypes {
    Input = 'Input',
    Select = 'Select',
    Button = 'Button',
    Custom = 'Custom'
}

type Position = 'left' | 'right';

type ButtonItem = {
    align?: Position;
    type: SearchTypes.Button;
    label: string;
    props?: 
    | (() => Partial<ButtonProps> & ExtraProps & ButtonEventProps)
    | Ref<Partial<ButtonProps> & ExtraProps & ButtonEventProps>
    | ComputedRef<Partial<ButtonProps> & ExtraProps & ButtonEventProps>
    | (Partial<ButtonProps> & ExtraProps & ButtonEventProps);
    visible?: boolean | (() => boolean) | Ref<boolean> | ComputedRef<boolean>;
};

type InputItem<T> = {
    align?: Position;
    type: SearchTypes.Input;
    field: T;
    label: string;
    initValue?: any; // 初始值
    props?: 
    | (() => Partial<InputProps> & ExtraProps & InputEventProps)
    | Ref<Partial<InputProps> & ExtraProps & InputEventProps>
    | ComputedRef<Partial<InputProps> & ExtraProps & InputEventProps>
    | (Partial<InputProps> & ExtraProps & InputEventProps);
    labelProps?: ExtraProps;
    visible?: boolean | (() => boolean) | Ref<boolean> | ComputedRef<boolean>;
}

type OptionsProps = {
    options: any[] | (() => any[]) | Ref<any[]> | ComputedRef<any[]>;
    valueField: string;
    labelField: string;
}

export type SelectItem<T> = OptionsProps & {
    align?: Position;
    type: SearchTypes.Select;
    field: T;
    label: string;
    initValue: any; // 初始值
    props?: 
    | (() => Partial<ISelectProps & ExtraProps> & SelectEventProps)
    | Ref<Partial<ISelectProps & ExtraProps> & SelectEventProps>
    | ComputedRef<Partial<ISelectProps & ExtraProps> & SelectEventProps>
    | (Partial<ISelectProps & ExtraProps> & SelectEventProps);
    labelProps?: ExtraProps;
    visible?: boolean | (() => boolean) | Ref<boolean> | ComputedRef<boolean>;
}

export type CustomItem<T> = {
    align?: Position;
    type: SearchTypes.Custom;
    field: T;
    label: string;
    initValue: any; // 初始值
    labelProps?: ExtraProps;
    visible?: boolean | (() => boolean) | Ref<boolean> | ComputedRef<boolean>;
}

export type SearchOption<T> = ButtonItem | InputItem<T> | SelectItem<T> | CustomItem<T>;

事件类型

export type ButtonEventProps = {
    onClick?: (event: Event) => void; // 点击事件
}

export type InputEventProps = {
    onBlur?: (event: FocusEvent) => void; // 失焦
    onFocus?: (event: FocusEvent) => void; // 聚焦
    onChange?: (value: string | number) => void; // 输入框值变化
    onInput?: (value: string | number) => void; // 输入框值变化
    onClear?: () => void; // 清空
}

export type SelectEventProps = {
    onChange?: (value: any) => void; // 下拉框选中值变化
    onVisibleChange?: (visible: boolean) => void; // 下拉框展开/收起
    onRemoveTag?: (tagValue: any) => void; // 移除tag
    onClear?: () => void; // 清空
    onBlur?: (event: FocusEvent) => void; // 失焦
    onFocus?: (event: FocusEvent) => void; // 聚焦
}