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|底部内容