Ph-front-component NPM

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	点击取消按钮时的回调	-