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

export enum SearchTypes {
    Input = 'Input', // 输入框
    Select = 'Select', // 下拉框
    Button = 'Button', // 按钮
    Custom = 'Custom' // 自定义
}

export type ExtraProps = {
    style?: string|CSSProperties;
    class?: string;
}

type Position = 'left' | 'right'; // 对齐方式

type ButtonItem = {
    align?: Position; // 对齐方式
    type: SearchTypes.Button;
    label: string; // 按钮名称
    props?: Partial<ButtonProps> & ExtraProps & ButtonEventProps;
};

type InputItem = {
    align?: Position;
    type: SearchTypes.Input;
    field: string; // 字段名
    label: string; // label名称
    initValue?: any; // 初始值
    props?: Partial<InputProps> & ExtraProps & InputEventProps;
    labelProps?: ExtraProps; // label样式属性
}

type OptionsProps = {
    options: any[] | (()=>any[]); // 下拉框选项
    valueField: string; // 下拉框选项值字段
    labelField: string; // 下拉框选项label字段
}

export type SelectItem = OptionsProps & {
    align?: Position; // 对齐方式
    type: SearchTypes.Select;
    field: string; // 字段名
    label: string; // label名称
    initValue: any; // 初始值
    props?: Partial<ISelectProps> & ExtraProps & SelectEventProps;
    labelProps?: ExtraProps; // label样式属性
}

export type CustomItem = {
    align?: Position; // 对齐方式
    type: SearchTypes.Custom;
    field: string; // 字段名
    label: string; // label名称
    initValue: any; // 初始值
    labelProps?: ExtraProps; // label样式属性
}

export type SearchOption = ButtonItem | InputItem | SelectItem | CustomItem;

事件类型

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; // 聚焦
}