PbstarAdmin

Appearance

Components 组件库 ​

共享组件库存放于根目录 components/，通过 @Pcomponents 别名引用。base/ 为基础组件，more/ 为扩展组件，另有 page/error.vue 作为 403 / 404 错误页（由主应用路由复用）。

组件为命名导出，使用前需从 @Pcomponents 引入（项目未做全量全局注册）。

Base 基础组件

More 扩展组件

p-title 标题组件 ​

功能说明 ​

带切换功能的标题栏组件，支持右侧区域通过插槽自定义。

Props ​

参数说明类型默认值示例
list标题列表Array[]['订单管理']
modelValue当前激活 tab 下标（受控用法可配合 v-model）Number00

Events ​

事件名说明回调参数
change标题切换事件{ value: 当前值, index: 当前索引 }
update:modelValue受控切换Number

Slots ​

名称说明
default右侧区域插槽

使用示例 ​

javascript
import { pTitle } from "@Pcomponents";
vue
<p-title :list="['订单', '物流']" @change="handleTitleChange" />

p-icon 图标组件 ​

功能说明 ​

图标组件，支持 Element Plus 图标（el-icon-* 前缀）和 iconfont 图标（p-icon-* 前缀），按前缀自动识别类型。

Props ​

参数说明类型默认值示例
name图标名称String""'el-icon-edit'
size图标大小String/Number1624
color图标颜色String""'#ff0000'

使用示例 ​

javascript
import { pIcon } from "@Pcomponents";
vue
<p-icon name="el-icon-edit" size="24" color="#ff0000" />

p-item 基础项组件 ​

功能说明 ​

基础表单项布局组件，提供标签和内容的统一布局，支持插槽自定义内容。标签超过 8 个字符自动以 tooltip 完整显示。

Props ​

参数说明类型默认值示例
label标签文本String"""用户名"
showText是否为文本展示模式Booleanfalsetrue
text文本内容String/Number"""张三"
isRequired是否必填（显示红色星号）Booleanfalsetrue
isTextWrap文本是否换行Booleanfalsetrue
labelWidth标签宽度String"100px""120px"

Slots ​

名称说明
default主内容区域
right右侧区域
bottom底部提示区域

使用示例 ​

javascript
import { pItem } from "@Pcomponents";
vue
<!-- 表单输入模式 -->
<p-item label="用户名" :isRequired="true">
  <el-input v-model="form.name" placeholder="请输入用户名" />
</p-item>

<!-- 文本展示模式 -->
<p-item label="用户名" :showText="true" text="张三" />

<!-- 带右侧插槽 -->
<p-item label="金额" :labelWidth="'120px'">
  <el-input v-model="form.amount" />
  <template #right>元</template>
</p-item>

<!-- 带底部提示 -->
<p-item label="密码">
  <el-input type="password" v-model="form.password" />
  <template #bottom>
    <span style="color: #999; font-size: 12px">密码长度为6-20位</span>
  </template>
</p-item>

p-search 搜索组件 ​

功能说明 ​

搜索表单组件，支持设置标题与重置按钮，通过插槽自定义搜索项。

Props ​

参数说明类型默认值示例
title搜索区标题String"查询条件""筛选"
showReset是否显示重置按钮Booleantruetrue

Events ​

事件名说明回调参数
search搜索按钮点击事件-
reset重置按钮点击事件-

Slots ​

名称说明
default自定义搜索项插槽

使用示例 ​

javascript
import { pSearch } from "@Pcomponents";
vue
<p-search title="查询条件" @search="toSearch" @reset="toReset">
  <p-item class="item" label="姓名">
    <el-input v-model="searchValue.name" placeholder="请输入姓名" />
  </p-item>
</p-search>

p-table 表格组件 ​

功能说明 ​

增强型表格组件，支持分页、多选、序号列、行展开（树形）等功能。

Props ​

参数说明类型默认值示例
data表格数据Array[][]
rowKey行唯一键（如 id）String/Functionundefined'id'
pagination分页配置Object{}{ total }:...
showSelection显示多选框Booleanfalsefalse
showIndex显示序号列Booleantruetrue
maxHeight表格最大高度String/Number"800"800
loading表格加载态Booleanfalsefalse
pageSizes分页条数选项Array[10, 20, 50, 100][10, 30, 50]

rowKey 设置后，若数据含 children，el-table 会自动开启树形表格。

pagination 分页配置 ​

参数说明类型默认值示例
pageNumber页码Number11
pageSize每页条数Number1010
total总条数Number00

Events ​

事件名说明回调参数
selectionChange选择项变化事件selectionList: 选中行数据
paginationChange分页变化事件{ pageNumber, pageSize }

Slots ​

名称说明
topLeft表格左上角区域
topRight表格右上角区域
column表格列（操作列）
botLeft表格左下角区域

使用示例 ​

javascript
import { pTable } from "@Pcomponents";
vue
<p-table
  :data="data"
  :pagination="pagination"
  @paginationChange="toPageChange"
>
  <template #column>
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="age" label="年龄">
      <template #default="{ row }">
        <span v-show="row.age < 25">{{ row.age }}</span>
        <span v-show="row.age >= 25">{{ row.age }}（老年人）</span>
      </template>
    </el-table-column>
    <el-table-column prop="operation" label="操作" fixed="right" width="200">
      <template #default="{ row }">
        <el-button type="primary" size="small" link @click="handleView(row)">
          查看
        </el-button>
        <el-button type="primary" size="small" link @click="handleEdit(row)">
          编辑
        </el-button>
      </template>
    </el-table-column>
  </template>
  <template #topLeft>
    <el-button type="primary" @click="handleAdd()"> 新增 </el-button>
  </template>
</p-table>

p-dialog 对话框组件 ​

功能说明 ​

支持两种形态的对话框组件（box 弹窗 / drawer 抽屉），内置全屏切换功能。

Props ​

参数说明类型默认值示例
type类型：box(弹窗)/drawer(抽屉)String"box""drawer"
modelValue显示/隐藏状态Booleanfalsetrue
title对话框标题String"""用户信息"
width宽度（box 默认带全屏切换，drawer 侧边抽屉）String"""600px"

Events ​

事件名说明回调参数
update:modelValue显示状态变化Boolean

Slots ​

名称说明
default对话框主体内容
footer页脚区域

使用示例 ​

javascript
import { pDialog } from "@Pcomponents";
vue
<p-dialog
  title="用户列表详情页"
  type="drawer"
  width="1000px"
  v-model="isDetail"
>
  <Detail ref="detailRef" :type="detailType" :id="detailId" />
  <template #footer>
    <el-button type="primary" v-if="detailType !== 'view'" @click="handleSave()">
      保存
    </el-button>
    <el-button @click="handleBack()"> 返回 </el-button>
  </template>
</p-dialog>

p-collapse 折叠组件 ​

功能说明 ​

可折叠内容区域组件。

Props ​

参数说明类型默认值示例
title标题内容String"""订单明细"
isCollapse初始是否展开Booleanfalsefalse
isControl是否允许折叠Booleantruetrue
showDownLine是否显示底部边框Booleantruetrue

Slots ​

名称说明
default折叠面板内容区域

使用示例 ​

javascript
import { pCollapse } from "@Pcomponents";
vue
<p-collapse title="详细信息">
  <p>这里是折叠内容</p>
</p-collapse>

p-iconSelect 图标选择组件 ​

功能说明 ​

图标选择组件，内置 Element Plus 图标与 Iconfont 图标两个 Tab，支持关键词搜索。

Props ​

参数说明类型默认值示例
title弹窗标题String"选择图标""选择图标"
modelValue当前选中的图标名String"""el-icon-edit"

Events ​

事件名说明回调参数
update:modelValue选中图标变化String

使用示例 ​

javascript
import { pIconSelect } from "@Pcomponents";
vue
<p-iconSelect v-model="form.icon" title="选择图标" />

p-verificationCode 图形验证码组件 ​

功能说明 ​

canvas 图形验证码组件，可配置字符集、颜色区间与画布尺寸。

Props ​

参数说明类型默认值
identifyCodes验证码字符集String"1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ"
fontSizeMin字号最小值Number24
fontSizeMax字号最大值Number28
backgroundColorMin背景色分量下限Number200
backgroundColorMax背景色分量上限Number220
contentWidth画布宽度Number100
contentHeight画布高度Number30

Events ​

事件名说明回调参数
changeCode验证码变化String

使用示例 ​

javascript
import { pVerificationCode } from "@Pcomponents";
vue
<p-verificationCode @changeCode="handleChangeCode" />

京ICP备2025125905号

Copyright © 2025-present Pbstar