0.0.5 • Published 3 years ago
vty-ui v0.0.5
一、vty-ui
打包发布组件包
npm run lib
npm publish安装
yarn add vty-ui
or
npm install vty-ui --save使用
将 vue 升级到 2.6.12
vty-ui 组件依赖于 vue 和 element-ui，对树的搜索推荐使用 xe-utils 工具
所以使用的项目中需要先安装上面3个 package: npm i vue emement-ui xe-utils --save
在 main.js 文件中引入插件并注册 ui
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 导入组件库
import vTyUI from 'vty-ui'
Vue.use(ElementUI)
// 注册组件库
Vue.use(vTyUI)
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')效果
二、组件文档
1、布局 ty-layout
1.1 基础布局
1.1.1 基础布局包含
标题
title，以prop属性的方式传入如果标题不仅于文字，可以
slot填入，如tab标签标题<template v-slot:headLeft> <h2>标题</h2> </template>
标题右侧如果有内容，可以使用插槽
<template v-slot:headRight> <div>展示头部右侧选中的项目</div> </template>
1.1.2 示例
<ty-layout title="物料类别">
<template v-slot:headRight>
<div>展示头部右侧选中的项目</div>
</template>
我是内容区域, 是默认插槽，此处可放置查询条件、表格、分页
</ty-layout>1.2 左右布局
1.2.1 左右布局包含
标题
title，以prop属性的方式传入标题右侧如果有内容，可以使用插槽
<template v-slot:headRight> <div>展示头部右侧选中的项目</div> </template>左侧树的插槽
v-slot:left- 右侧内容为默认插槽
1.2.2 示例
<ty-layout title="物料类别" hasTreeLeft>
<template v-slot:headRight>
<div>展示头部右侧选中的项目</div>
</template>
<template v-slot:left>
<h1>我是左侧的区域</h1>
</template>
我是内容区域, 是默认插槽，此处可放置查询条件、表格、分页
</ty-layout>1.3 tab标签页布局
1.3.1 组件说明
布局时不再传入标题属性，而改成用 headLeft 插槽
1.3.2 示例
<template>
<ty-layout>
<template v-slot:headLeft>
<el-tabs v-model="activeName" class="title-tabs">
<el-tab-pane label="工单规则" name="workRules" v-if="accessCode['param_set_work_rules']">
</el-tab-pane>
<el-tab-pane label="关单设置" name="documentSet" v-if="accessCode['param_set_document_set']">
</el-tab-pane>
</el-tabs>
</template>
<keep-alive>
<component :is="activeName"></component>
</keep-alive>
</ty-layout>
</template>
<script>
import workRules from './child/workRules';
import documentSet from './child/documentSet';
export default {
name: 'paramSet',
components: {
workRules,
documentSet
},
data () {
return {
activeName: 'workRules',
accessCode: {
param_set_work_rules: false, // 工单规则
param_set_document_set: false // 关单设置
}
};
},
mounted () {
this.getAccessCode();
}
};
</script>
<style lang="less" scoped>
</style>2、搜索树组件
说明：树组件是基于ztree3.5.x的版本做的封装，组件加载完成后会生成 ztreeObj 对象, 配置项可以参考 ztree 的文档
2.1 左侧搜索树
2.1.1 基本使用
<ty-search-tree
ref="leftTree"
:setting="setting"
:nodes="nodes" <!-- 传递给树组件的数据 -->
@onClick="onClick" <!-- 处理组件中的点击选中某一节点的事件 -->
@onCreated="handleCreated" <!-- 树组件生成完成后的回调，主要用于在当前页ztreeObj对象，方便对树再次进行操作 -->
@searchTree="searchTree" <!-- 搜索事件,对数据进行过滤后，生成新的nodes数据，树将进行变更 -->
/>import XEUtils from 'xe-utils' // 用这个工具类对树数据进行搜索
export default {
data () {
return {
ztreeObj: null,
setting: {
check: {
enable: false
},
data: {
// 设置图标库(采用iconfont class形式)
iconMap: {
1: 'icon-jituan',
2: 'icon-fengongsi',
3: 'icon-fengongsi',
4: 'icon-guanlichu',
5: 'icon-xiangmu',
6: 'icon-quyu',
7: 'icon-loudong',
8: 'icon-danyuan',
9: 'icon-fangjian'
},
// 设置对应每个节点的节点类型，与数据中customType
key: {
idKey: 'nodeId', // 树数据的主字段名
nodeType: 'customType', // 这是固定的，图标使用自定义的类型
name: 'nodeName', // 树的名称字段
title: 'nodeName', // 标题字段
children: 'childList' // 子节点的字段名
}
},
view: {
// 开启图标显示功能
showIcon: true
}
},
nodes: ztreeData
}
},
methods: {
onClick: function (evt, treeId, treeNode) {
// 点击事件
console.log(evt.type, treeNode)
},
onCheck: function (evt, treeId, treeNode) {
// 选中事件，需要开启 check: {enable: true}
console.log(evt.type, treeNode)
},
handleCreated: function (ztreeObj) {
this.ztreeObj = ztreeObj
// onCreated 中操作ztreeObj对象展开第一个节点
ztreeObj.expandNode(ztreeObj.getNodes()[0], true)
this.$refs.leftTree.setSelectedNode('10845') // 设置选中的节点
},
searchTree (keyword) {
console.log('你搜索的关键字', keyword)
if (keyword) {
const options = { children: 'childList' }
const searchProps = ['nodeName']
this.nodes = XEUtils.searchTree(ztreeData, item => item.nodeName.indexOf(keyword) > -1, options)
} else {
this.nodes = ztreeData
}
}
}
}
</script>2.1.2 树组件的props
props: {
setting: { // 树的设置对象
type: Object,
required: false,
default: () => ({})
},
nodes: { // 树数据，是一个数组
type: Array,
required: true,
default: () => ([])
},
searchable: { // 是否可以搜索，用于是否展示头部的搜索框
type: Boolean,
required: false,
default: false
},
placeholder: { // 搜索框的提示文字
type: String,
required: false,
default: '请输入搜索关键字'
},
beforeClickFn: { type: Function }, // 节点被点击之前的处理函数（可选），比如： 只能选择nodeType='5'的节点
beforeCheckFn: { type: Function } // 同上面的方法类似，多选的情况下使用
}2.1.3 树组件暴露的方法
// 1. setSelectedNode(nodeId: string)
this.$refs.leftTree.setSelectedNode('10845') // 设置选中的节点
// 2. setCheckedNodes(checkedKeys: string[])
this.$refs.leftTree.setCheckedNodes(['10845']) // 设置勾选的节点2.2 右侧项目选择树组件
2.2.1 基本使用
<ty-select-project ref="selectProject"
:nodes="projectNodes" <!-- 传递给组件的树数据 -->
@search="searchProject" <!-- 执行搜索 -->
@click="onSelectProject" <!-- 选中某个项目 -->
:beforeClick="beforeClick"> <!-- 树节点被选中之前的处理函数 -->
</ty-select-project>searchProject (keyword) {
console.log('你搜索的关键字', keyword)
if (keyword) {
const options = { children: 'childList' }
this.projectNodes = XEUtils.searchTree(ztreeData, item => item.nodeName.indexOf(keyword) > -1, options)
} else {
this.projectNodes = ztreeData
}
},
onSelectProject (projectNode) { // 选中单个项目
console.log('当前选择的项目节点：', projectNode)
},
mounted () {
this.$refs.selectProject.setSelectedNode('10845') // 初始化后设置选中的项目
}2.2.2 项目选择树的 props
props: {
setting: {
type: Object,
required: false,
default: () => ({})
},
nodes: {
type: Array,
default: () => ([])
},
placeholder: {
type: String,
default: '请输入搜索关键字'
},
beforeClick: { type: Function } // 选中节点之前的处理事件，如不允许选择nodeType='2'的节点
}如果要对项目选择树的树数据进行重写，例如，树的主键字段不是 nodeId，此时可以传递 setting 对默认配置进行覆写
3、搜索工具栏
3.1 简单搜索工具栏
适用于少量输入框，右侧是操作按钮的简易布局
3.1.1 简单搜索工具栏包含的 props
placeholder： 搜索框的提示文字，如果自定义了插槽filterInput，该属性可忽略value： 字符串类型，可以使用v-model的方式进行传入
3.1.2 基本使用
<ty-simple-search-bar v-model="keyword" @search="handleSearch">
<el-button type="text" icon="el-icon-plus">新建细类</el-button>
</ty-simple-search-bar>
<!-- 也可 -->
<ty-simple-search-bar>
<template slot:filterInput>
<el-input class="header-filter-input" placeholder="请输入名字" v-model.trim="keyword" @input="search" clearable>
<el-button type="primary" slot="append" icon="el-icon-search" @click="keyword && search()"></el-button>
</el-input>
</template>
<el-button type="text" icon="el-icon-plus">新建细类</el-button>
</ty-simple-search-bar>4、搜索栏
4.1 说明
适用于表格页面上面的搜索栏区域内容
4.1.1 搜索栏的props说明
search-list: 更多筛选条件的列表数据，具体格式请参照基本使用例子module-name: 当前模块名称用以保存及查询过滤条件
4.1.2 搜索栏的events事件说明
on-search: 点击搜索按钮时触发的事件
// 返回值的例子
handleSearch (value) {
value = [
{
id: 'id',
name: '名称',
type: '过滤类型',
value: '值'
}
];
},4.1.3 基本使用
<ty-searchbar
:searchList="searchList"
ref="searchbar"
moduleName="filter"
@on-search="handleSearch"
>
<el-button type="text" icon="el-icon-plus" size="small" @click="add">新建细类</el-button>
</ty-searchbar>
```slot
<!-- 组件右边部分按钮区域,通过slot插入 -->
<el-button type="text" icon="el-icon-plus" size="small" @click="add">新建细类</el-button>
```ref
当宽度改变时（除窗口大小改变）提供calculate()方法重新计算外部显示多少过滤项，使用ref调用
```js
type值： multiple: 多选； single: 单选； daterange: 日期条件； datetimerange：时间条件； monthrange：月份条件
searchList: [
{
id: 1, // 区分筛选行的唯一值
name: '对应业务1', // 筛选行的名称
multiple: false, // 判断是否为多选(false: 单选; true: 多选)
itemList: [
id: 1, // 区分各个选项的唯一值
name: '单选', // 选项的名称
placeholder: '单选', // 提示的文字
type: 'single', // 选项的类型 text: 文本；
isOutside: true, // 是否显示在更多筛选外，根据页面宽度决定外部显示几个过滤条件 最多5个最少2个
value: null, // 选项值
options: [ // 选项过滤数据
{ value: '001', label: '选项1' },
{ value: '002', label: '选项2' },
{ value: '003', label: '选项3' }
]
]
}
]5 表格基本使用
<ty-table
ref="table"
moduleName="table"
height="calc(100% - 70px)"
:columns="columnsList"
:transContent="transContent"
:data="tableData"
:checkbox-config="{checkAll: true}"
rowKey="id"
:showChoiseSum="true"
:sumInfo="{money: 300, money1: 110}"
@sort-change="handleSortChange"
@selection-change="handleSelectionChange"
>
</ty-table>
Table Attributes
参数 说明 类型 默认值
data 表格显示的数据 array []
columns 表格表头数据 array []
height 表格高度 string
transContent 表格内容转换的方法 Function(row, prop)
sumInfo 需要合计列的prop及对应全部合计值 Object
如{money: 1000}
showSummary 是否显示合计功能 Boolean false
showChoiseSum 是否显示选中合计 Boolean false
showPageSum 是否显示分页合计 Boolean true
rowKey 行数据的 Key，用来优化Table的渲染;在使用 String
reserve-selection功能与显示树形数据时,
该属性是必填的。
showDragSet 是否显示表格右上角设置功能 Boolean true
totalBottom 左下角合计距表格底部距离 String|Number
(默认1，当表格底部出滚动条时，需设置为9)
Table Events
事件名 说明 参数
selection-change 当选择项发生变化时会触发该事件 selection
sort-change 当表格的排序条件发生变化的时候会触发该事件 { column, prop, order }
Table Methods
通过this.$refs.table.vxeTable 调用vxe-table的方法
Table Slot
name 说明
start 插入表格第一列，一般用于多选列
end 插入表格最后一列，一般用于操作列
// 表格列属性
columns Attributes
参数 说明 类型 可选值 默认值
title 显示的标题 String
field 对应列内容的字段名 String
width 对应列的宽度 String
minWidth 对应列的最小宽度 String
fixed 列是否固定在左侧或者右侧， String, boolean left, right
true 表示固定在左侧
sortable 对应列是否可以排序 Boolean false
tooltip 当内容过长被隐藏时显示 tooltip Boolean false
align 对齐方式 String left/center/right left
slotCell 自定义表格内容，设置的 String
值需与Slot的值相同
如slotCell为'slotCell',则
<template slot="slotCell"
slot-scope="scope">
</template>
参数{ row }
#### 6、表格列设置组件
表格右上角设置功能单独使用dragList
参数listConf 表格表头数据即表格组件中columns数据
保存事件save 返回最新表格表头数据
（组件用法详见App.vue）