PbstarAdmin

Appearance

Components 组件库 ​

Base 基础组件

Layout 布局组件

p-title 标题组件 ​

功能说明 ​

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

Props ​

参数说明类型默认值示例
list标题列表Array[]['订单管理']

Events ​

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

Slots ​

名称说明
default右侧区域插槽

使用示例 ​

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

p-icon 图标组件 ​

功能说明 ​

图标组件，支持 Element plus 图标和 iconfont 图标

Props ​

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

使用示例 ​

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

p-item 基础项组件 ​

功能说明 ​

基础表单项布局组件,提供标签和内容的统一布局,支持插槽自定义内容

Props ​

参数说明类型默认值示例
label标签文本String"""用户名"
showText是否为文本展示Booleanfalsetrue
text文本内容String/Number"""张三"
isRequired是否必填Booleanfalsetrue
isTextWrap文本是否换行Booleanfalsetrue

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="金额">
  <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-button 按钮组件 ​

功能说明 ​

按钮组件，同 Element plus 按钮组件并支持 btnkey 权限控制

Props ​

参数说明类型默认值示例
btnkey按钮权限名称String-"orderPage_add"
...Element plus 按钮组件 Props---

使用示例 ​

javascript
import { pButton } from "@Pcomponents";
vue
<p-button type="primary" btnkey="orderPage_add">添加订单</p-button>

p-search 搜索组件 ​

功能说明 ​

搜索表单组件，支持动态表单配置

Props ​

参数说明类型默认值示例
showReset是否显示重置按钮Booleantruetrue

Events ​

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

Slots ​

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

使用示例 ​

javascript
import { pSearch } from "@Pcomponents";
vue
<p-search @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[][]
showSelection显示多选框Booleanfalsefalse
showIndex显示序号列Booleantruetrue
maxHeight表格最大高度Number/String800800
pagination分页配置Object{}{}:Pagination

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 }">
        <p-button type="primary" size="small" link @click="handleView(row)">
          查看
        </p-button>
        <p-button type="primary" size="small" link @click="handleEdit(row)">
          编辑
        </p-button>
      </template>
    </el-table-column>
  </template>
  <template #topLeft>
    <p-button type="primary" @click="handleAdd()"> 新增 </p-button>
  </template>
</p-table>

p-dialog 对话框组件 ​

功能说明 ​

支持两种形态的对话框组件(弹窗/抽屉),内置全屏切换功能

Props ​

参数说明类型默认值示例
type类型:box(弹窗)/drawer(抽屉)String"box""drawer"
modelValue显示/隐藏状态Booleanfalsetrue
title对话框标题String"""用户信息"
width宽度(box 类型默认 500px,drawer 默认 400px)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"></Detail>
  <template #footer>
    <p-button
      type="primary"
      @click="handleSave()"
      v-if="detailType !== 'view'"
    >
      保存
    </p-button>
    <p-button @click="handleBack()"> 返回 </p-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-twinBox 双栏布局组件 ​

功能说明 ​

双栏布局组件，用于将内容分为左右两栏，移动端自适应为上下两栏

Props ​

参数说明类型默认值示例
size首栏宽度/高度String/Number"220""220"
min首栏最小宽度/高度String/Number"100""100"
max首栏最大宽度/高度String/Number"380""380"

Slots ​

名称说明
plan1左侧/顶部内容
plan2右侧/底部内容

使用示例 ​

javascript
import { pTwinBox } from "@Pcomponents";
vue
<p-twinBox>
  <template #plan1>
    <p>这里是左侧内容</p>
  </template>
  <template #plan2>
    <p>这里是右侧内容</p>
  </template>
</p-twinBox>

京ICP备2025125905号

Copyright © 2025-present Pbstar