ph-front-component
安装
npm install --save ph-front-component
引入
按需引入
import { ThemeSelector } from 'ph-front-component';
全局引入
在入口文件(main.js)中全局引入:
import PhfrontComponent from 'ph-front-component';
Vue.use(PhfrontComponent);
权限按钮/AuthButton
使用方法
<auth-button
:buttonType="buttonType"
:permission="permission"
:baseHost="baseHost"
@authCallback="authCallback">
</auth-button>
属性
属性名 |
描述 |
类型 |
默认值 |
可选值 |
buttonType |
已经配置好的类型包括新增、删除、修改、搜索、导入、导出,如果想要使用自定义,则不传 |
String |
- |
"add" /"delete" /
"edit" /"search" /
"upload" /"download"
|
permission |
按钮的权限地址 |
String |
- |
- |
baseHost |
基本域名,默认是后台本地地址,建议传配置好的代理名以免产生跨域请求 |
String |
- |
- |
access |
是否要展示。 当前页面有多个相同权限的按钮时,为了避免出现多个相同请求,请使用该属性。 |
Boolean |
- |
- |
事件
事件名 |
描述 |
返回值 |
authCallback |
获取权限结果之后的回调 |
权限结果 |
日期范围选择器/PritDateRange
使用交互:开始时间和结束时间可以分开选择。
支持传开始时间或结束时间的默认值,支持 element/DatePicker 文档中的属性。
使用方法
<date-picker-range
v-model:startDate="startDate"
v-model:endDate="endDate"
:type="type"
:disabledDate="(current) => {return true;}"
:startPlaceholder="开始日期"
:endPlaceholder="结束日期">
</date-picker-range>
属性
属性名 |
描述 |
类型 |
默认值 |
可选值 |
startDate |
开始日期,如果有传则会被作为默认值 |
String/Date |
- |
- |
endDate |
结束日期,如果有传则会被作为默认值 |
String/Date |
- |
- |
type |
日期选择器类型 |
String |
date |
year /month /date
|
disabledDate |
不可选日期 |
Function |
- |
function(current) {return current && current > new Date()} |
startPlaceholder |
开始日期的占位符 |
String |
开始日期 |
- |
endPlaceholder |
结束日期的占位符 |
String |
结束日期 |
- |
事件
事件名 |
描述 |
返回值 |
change |
日期选择值改变 |
选中的日期范围,{ startDate, endDate }
|
时间范围选择器/PritTimeRange
使用交互:开始时间和结束时间可以分开选择。
支持传开始时间或结束时间的默认值,支持 element/TimePicker 文档中的属性。
使用方法
<time-picker-range
v-model:startTime="startTime"
v-model:endTime="endTime"
:type="type"
:startPlaceholder="开始时间"
:endPlaceholder="结束时间">
</time-picker-range>
属性
属性名 |
描述 |
类型 |
默认值 |
可选值 |
startTime |
开始时间,如果有传则会被作为默认值 |
String/Date |
- |
- |
endTime |
结束时间,如果有传则会被作为默认值 |
String/Date |
- |
- |
type |
时间选择器类型 |
String |
HH:mm:ss |
HH:mm:ss /HH:mm
|
startPlaceholder |
开始时间的占位符 |
String |
开始时间 |
- |
endPlaceholder |
结束时间的占位符 |
String |
结束时间 |
- |
事件
事件名 |
描述 |
返回值 |
change |
时间选择值改变 |
选中的时间范围,{ startTime, endTime }
|
表格/PritTable
包括表格(多选)按钮、表格主体、页码选择器,其中表格按钮组(表格主体上方)和页码选择器(表格主体下方)可选。
支持 element/Table 文档中的属性。
使用方法
<prit-table
:tableBtns="tableBtns"
:tableData="tableData"
:tableColumns="tableColumns"
:isShowPager="isShowPager"
:pagerProps="pagerProps">
</prit-table>
属性
属性名 |
描述 |
类型 |
默认值 |
可选值 |
tableBtns |
表格按钮组的配置,详情见 tableBtns
|
Array |
- |
- |
tableData |
表格数据 |
Array |
- |
- |
tableColumns |
表格配置,详情见 tableColumns
|
Object |
- |
- |
isShowPager |
是否展示页码选择器 |
Boolean |
true |
- |
pagerProps |
页码的配置,详情见 element/Pagination
|
Object |
- |
- |
pageTotal |
表格数据数量 |
String/Number |
- |
- |
tableBtns
基于 Authbutton 构成。
属性名 |
描述 |
类型 |
默认值 |
可选值 |
name |
标识符,用于点击事件的时候的回调 |
String |
- |
- |
buttonType |
已经配置好的类型包括新增、删除、修改、搜索、导入、导出,如果想要使用自定义,则不传 |
String |
- |
"add" /"delete" /
"edit" /"search" /
"upload" /"download"
|
permission |
按钮的权限地址,如不传则默认展示按钮 |
String |
- |
- |
title |
按钮的名称 |
String |
- |
- |
tableColumns
支持 element/table-column 的属性。
如果想要自定义某个表格内容或某个表头的内容,使用 slot
的方式,并在该表格项中配置 slot:name
即可,参考如下代码:
<prit-table
:tableColumn="{
label: "测试",
prop: "test",
slotName: "testSlotName"
headerSlotName: "testHeaderSlotName"
}">
<template #testSlotName="{ row, column, $index}">
{{row.test}}: {{column.prop}}: {{$index}}
</template>
<template #testHeaderSlotName="{ column, $index}">
{{column.label}}: {{$index}}
</template>
</prit-table>
属性名 |
描述 |
类型 |
默认值 |
可选值 |
slotName |
表格自定义内容的 slot:name
|
String |
- |
- |
headerSlotName |
表头表格自定义内容的 slot:name
|
String |
- |
- |
事件
事件名 |
描述 |
返回值 |
tableBtnClick |
点击表格顶部按钮之后的回调 |
点击的按钮,{ name, selectedList }
|
selectChange |
表格选择列表变化时的回调 |
选中的列表 |
pageChange |
页码、页数变化时的回调 |
页码、页数,{ size, currentPage }
|
方法
方法名 |
描述 |
参数 |
reset |
清空表格多选状态和页码为1 |
- |
树形控件/PritTree
包括可选的搜索区域以及树形列表。
支持 element/Tree 文档中的属性。
使用方法
<prit-tree
:width="width"
:showTreeSearch="showTreeSearch"
:treeList="treeList"
:treeProps="treeProps"
:useVirtualTree="useVirtualTree"
:onlySelectLeaf="onlySelectLeaf"
:treeSearchFun="treeSearchFun"
@handleSelectTree="handleSelectTree">
</prit-tree>
属性
属性名 |
描述 |
类型 |
默认值 |
可选值 |
width |
宽度 |
String/Number |
200px |
- |
height |
高度 |
Number |
200 |
- |
showTreeSearch |
是否展示树选择器顶部搜索框 |
Boolean |
false |
true /false
|
onlySelectLeaf |
是否只能选择叶子节点 |
Boolean |
true |
true /false
|
treeProps |
配置选项 |
Object |
{ value: 'id', label: 'label', children: 'children' } |
- |
useVirtualTree |
是否要使用虚拟树的组件,当列表数据过多时推荐使用 |
Boolean |
true |
true /false
|
treeList |
树选择器列表,单个项默认请以 { label, value, children } 的结构赋值,或者在 treeProps 中配置 |
Array |
- |
- |
treeSearchFun |
自定义顶部输入搜索函数 |
Function |
- |
- |
事件
事件名 |
描述 |
返回值 |
handleSelectTree |
选择树节点后的回调 |
选中的树节点的信息,{ label, value, level, isLeaf } ,若是反选,则返回 null
|
树形穿梭框/PritTreeTransfer
树形列表的穿梭框。
使用方法
<prit-tree-transfer
v-model="treeSelects"
:transferList="treeList2"
:propMap="treeProps"
:height="500"
:isParentDisable="false"
@change="handleChangeTree">
</prit-tree-transfer>
属性
属性名 |
描述 |
类型 |
默认值 |
可选值 |
height |
高度 |
Number |
200 |
- |
isParentDisable |
是否只能选择叶子节点 |
Boolean |
true |
true /false
|
propMap |
配置选项 |
Object |
{ value: 'id', label: 'label', children: 'children' } |
- |
transferList |
树选择器列表,单个项默认请以 { label, value, children } 的结构赋值,或者在 propMap 中配置 |
Array |
- |
- |
事件
事件名 |
描述 |
返回值 |
change |
当前选中列表变更时的回调 |
选中的id列表 |
代码编辑器/PritCodeMirror
使用方法
<prit-code-mirror
v-model:codeVal="codeVal"
:codeMirrorId="codeMirrorId"
:codeMode="codeMode"
:isReadOnly="isReadOnly"
:height="height"
@change="handleChange">
</prit-code-mirror>
属性
基于 codeMirror 实现,如需对组件进行改造,请参考官方文档进行改动。
属性名 |
描述 |
类型 |
默认值 |
可选值 |
codeMirrorId |
编辑器标识符。 当页面中可能存在多个编辑器的时候必填,否则可能会导致数据更新异常。 |
String |
- |
- |
codeVal |
默认代码字符串 |
String |
- |
- |
codeMode |
编程语言,请参考 支持语言 查阅。 |
String |
javascript |
- |
isReadOnly |
是否只读 |
Boolean |
false |
- |
height |
编辑器高度,String 类型时请尽量使用 px 。 |
String/Number |
- |
- |
theme |
编辑器主题,请参考 支持主题 查阅。 |
String |
panda-syntax |
- |
fontSize |
编辑器字体大小,请尽量使用 px 。 |
String |
- |
- |
lineHeight |
编辑器行高。 |
Number/String |
- |
- |
extraKeys |
快捷键自定义,格式为:{ 快捷键:function(cm) {}; }
|
Object |
- |
- |
事件
事件名 |
描述 |
返回值 |
change |
输入代码更新时的回调 |
代码字符串 |
focus |
编辑器聚焦 |
编辑器实例 instance ,事件 event
|
blur |
编辑器失焦 |
编辑器实例 instance ,事件 event
|
方法
方法名 |
描述 |
返回值 |
changeTheme |
修改主题,请参考 支持主题 查阅。 |
- |
changeFontSize |
修改代码字体,请使用 px
|
- |
changeLineHeight |
修改行高,支持 Number /px
|
- |
支持语言
c++
clike
csharp
css
gpsql
gql
html
java
javascript
json
jsx
jsx-typescript
less
markdown
mssql
mysql
nginx
plsql
python
sass
scss
shell
sql
text
typescript
vue
xml
支持主题
3024-day
3024-night
abbott
abcdef
ambiance-mobile
ambiance
ayu-dark
ayu-mirage
base16-dark
base16-light
bespin
blackboard
cobalt
colorforth
darcula
dracula
duotone-dark
duotone-light
eclipse
elegant
erlang-dark
gruvbox-dark
hopscotch
icecoder
idea
isotope
juejin
lesser-dark
liquibyte
lucariomaterial-darker
material-ocean
material
mbo
mdn-like
midnight
monokai
moxer
neat
neo
night
oceanic-next
panda-syntax
paraiso-dark
paraiso-light
pastel-on-dark
railscasts
rubyblue
seti
shadowfox
solarized
ssms
the-matrix
tomorrow-night-bright
tomorrow-night-eighties
ttcn
twilight
vibrant-ink
xq-dark
xq-light
yeti
yonce
zenburn
穿梭框选择器/SelectTransfer
带有输入框的穿梭框选择器,通过点击输入框弹出穿梭框弹窗。
使用方法
<select-transfer
:isTreeList="isTreeList"
:transferList="transferList"
:selectedList="selectedList"
:transferTitle="transferTitle"
:propMap="propMap"
:isParentDisable="isParentDisable"
@change="handleChange">
</select-transfer>
属性
属性名 |
描述 |
类型 |
默认值 |
可选值 |
height |
树形列表高度 |
Number |
200 |
- |
isTreeList |
是否是树形结构 |
Boolean |
false |
true /false
|
transferList |
数据源 |
Array |
- |
- |
selectedList |
选中的数据,如传则即为展示在右侧的列表。 |
Array |
- |
- |
transferTitle |
输入框占位符,也作为弹窗的标题 |
String |
"请选择" |
- |
propMap |
配置选项 |
Object |
{ value: 'id', label: "label", children: "children", disabled: "disabled" } |
- |
isParentDisable |
如果是树形结构,父级节点是否不可选。 |
Boolean |
true |
true /false
|
事件
事件名 |
描述 |
返回值 |
change |
选中值改变的回调,仅弹窗点击确认时有效 |
选中的列表 |
弹框/PritDialog
基于 el-dialog 进行二次开发,增加了 放大/缩小 、全屏/取消全屏 功能。
支持 element/Dialog 文档中的属性。
使用方法
<prit-dialog
v-model="dialogVisible"
:canFullScreen="canFullScreen"
:canZoomInOrOut="canZoomInOrOut"
:showClose="showClose"
:isShowHeader="isShowHeader"
:isShowFooter="isShowFooter"
:confirmText="confirmText"
:cancelText="cancelText"
@fullScreen="handleFullScreen"
@zoomIn="handleZoomIn"
@close="handleClose"
@confirm="handleConfirm"
@cancel="handleCancel">
</prit-dialog>
属性
属性名 |
描述 |
类型 |
默认值 |
可选值 |
title |
弹框的标题 |
String |
- |
- |
canFullScreen |
是否可以全屏 |
Boolean |
false |
true /false
|
canZoomInOrOut |
是否可以放大 |
Boolean |
false |
true /false
|
showClose |
是否要展示关闭按钮 |
Boolean |
true |
true /false
|
isShowHeader |
是否要展示顶部 |
Boolean |
true |
true /false
|
isShowFooter |
是否要展示底部,默认是按钮,可配置 |
Boolean |
true |
true /false
|
confirmText |
确认按钮文本 |
String |
"确认" |
- |
cancelText |
取消按钮文本 |
String |
"取消" |
- |
事件
事件名 |
描述 |
返回值 |
fullScreen |
全屏改变的回调 |
当前是否是全屏的状态,Boolean |
zoomIn |
放大或者缩小的回调 |
当前放大还是缩小的状态,Boolean |
close |
关闭弹框的回调 |
- |
confirm |
点击确认按钮时的回调 |
- |
cancel |
点击取消按钮时的回调 |
- |
Slot
name |
说明 |
- |
主体内容 |
title |
顶部内容 |
footer |
底部内容 |