Appearance
PenkSelect 头部搜索栏
专门用于后台管理系统，因为头部搜索都是固定的一些配置，比如 input，select...等等配置。 PenkSelect 通过传递 JSON 对象，配置其头部各个搜索项。
基础用法
在按照文档配置，进行了 Penk-Ui 依赖包的安装后，就可以直接使用。
js
// xxx.vue template
<template>
<PenkSearch ref="refPenkSearch" :searchConfig="searchConfig">
</PenkSearch>
</template>
插槽
js
// xxx.vue template scope
<template>
<PenkSearch ref="refPenkSearch" :searchConfig="searchConfig">
<el-button type="primary" @click="getList">搜索</el-button>
</PenkSearch>
</template>
配置
ts
// xxx.vue script
<script setup lang="ts">
{/* 基础配置 */}
const searchConfig = [
{
type: "select",
label: "父级用户类型",
width: 150,
prop: "parentId",
hidden: false,
clearable: true,
data: [],
},
{
type: "input",
label: "类型名",
placeholder: "请输入类型名",
width: 150,
clearable: true,
prop: "typeName",
hidden: false,
},
{
type: "select",
label: "是否查找软删除",
placeholder: "请选择",
width: 150,
prop: "paranoid",
hidden: false,
clearable: true,
data: [
{
value: 0,
label: "是",
},
{
value: 1,
label: "否",
},
],
},
];
</script>
获取头部搜索栏选择数据
ts
import { ref } from "vue";
/* 搜索框ref实例 */
const refPenkSearch = ref();
/* 获取搜索栏data */
function getList() {
console.log(refPenkSearch.value.queryObj);
// ...
}
PenkSelect TypeScript 接口声明
ts
// 这边主要是申明了是个对象数组，并且每个对象定义是按照searchItem这个接口来的
interface Props {
searchConfig: searchItem[];
}
// 每一个搜索条件对应的一些参数
interface searchItem {
// 必填
// 标签名
label: string;
// 组件所需类型，下拉框或者输入框
type: SearchBarItemType;
// 对应的属性名 如： queryObj.name ~
prop: string;
// 选填-通用
// 宽度
width?: number;
// 占位符
placeholder?: string;
// 是否清空
clearable?: boolean;
// 是否使能
disabled?: boolean;
// 是否隱藏
hidden?: boolean;
// 选填-特殊
// 数据，一般是下拉框之类需要可选项的才用到
data?: any;
}
declare type SearchBarItemType = "input" | "select";
PenkSelect API
PenkSelect 属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| searchConfig | 这边主要是申明了是个对象数组，并且每个对象定义是按照 searchItem 这个接口来的 | searchItem[] | [] |
searchItem 属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| label | 必填，标签名 | string | --- |
| type | 必填，组件所需类型，下拉框或者输入框 | "input", "select" | --- |
| prop | 必填，对应的属性名 如： queryObj.name ~ | string | --- |
| width | 必填，宽度 | number | "" |
| placeholder | 选填，占位符 | string | false |
| clearable | 选填，是否清空 | boolean | false |
| disabled | 选填，是否使能 | boolean | false |
| hidden | 选填，是否隱藏 | boolean | false |
| data | 数据，一般是下拉框之类需要可选项的才用到 | any | [] |
PenkSelect 对外暴露的属性或者方法
| 属性名 | 说明 | 类型 |
|---|---|---|
| queryObj | 用户勾选后的头部搜索栏数据 | object |
PenkSelect 插槽
| 插槽名 | 说明 |
|---|---|
| default | 组件末尾追加，显示在 PenkSelect 配置项之后 |