Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/blryli/vue-matchup
canvas实现的列表/表格关系动态匹配组件
https://github.com/blryli/vue-matchup
canvas matchup relation rollup vue vuejs vuejs2
Last synced: about 1 month ago
JSON representation
canvas实现的列表/表格关系动态匹配组件
- Host: GitHub
- URL: https://github.com/blryli/vue-matchup
- Owner: blryli
- Created: 2019-01-04T10:08:40.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T05:14:15.000Z (almost 2 years ago)
- Last Synced: 2024-10-01T17:08:11.803Z (about 1 month ago)
- Topics: canvas, matchup, relation, rollup, vue, vuejs, vuejs2
- Language: Vue
- Homepage: https://blryli.github.io/vue-matchup/
- Size: 7 MB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-matchup
- canves实现的列表/表格关系动态匹配组件
> 坐标计算用 getBoundingClientRect，动画效果会影响线展示位置，如: 使用element弹窗加载组件 vue-matchup 时，在动画结束前就已经算出个点相对窗口的坐标点，所以坐标值是有偏差的。解决办法是使用一个没有位移动画的弹窗加载组件。
### 演示
[github pages](https://blryli.github.io/vue-matchup/)
#### npm 安装
```js
npm i vue-matchup -S
```
#### 使用
```js
import VueMatchup from 'vue-matchup'
Vue.use(VueMatchup)
```
#### 基本使用
```html
```
```js
export default {
data () {
return {
lines: [
{ leftId: "L1-1", rightId: "R1-5" },
{ leftId: "L1-3", rightId: "R1-2" }
],
leftData: [
{
lineNo: 0,
qty: 100,
unit: "PCS",
nw: { weight: 100, unit: "KG" },
gw: { weight: 120, unit: "KG" }
}
],
rightData: [
{
lineNo: 1,
qty: 100,
unit: "KG"
}
],
leftThead: [
{
title: "序号",
props: "lineNo"
},
{
title: "净重",
props: "nw/weight" // table需要展示的数据，嵌套对象结构用'/'分隔
}
],
rightThead: [
{
title: "序号",
props: "lineNo"
},
{
title: "数量",
props: "qty"
}
]
}
}
}
```
### Attributes
| 参数 | 说明 | 类型 |可选值 |默认值|
| --------- | ---------- | -------- |---- | ----- |
| lines | 已连接线的数组 | array |- | [] |
| leftData | 左面板展示的数据 | array |- | [] |
| rightData | 右面板展示的数据 | array |- | [] |
| leftThead | 左面板数据的标题及展示的字段[{title: 'title', props: 'props'}] | string/array |- | [] |
| rightThead | 右面板数据的标题及展示的字段[{title: 'title', props: 'props'}] | string/array |- | [] |
| leftTitle | 左面板折叠面板的标题，单个面板为string，多个面板为array ['title','title'] | string/array |- | left |
| rightTitle | 右面板折叠面板的标题，单个面板为string，多个面板为array ['title','title'] | string/array |- | right |
| leftIdFun | 自定义左面板row的id，此id用于行操作，及定义线条leftId与rightId，例 (row, index) => `leftId:${index}-${row.lineNo}`，第一个回调参数为行数据，第二个回调参数为行号，leftIdFun不存在则使用默认id| function |- | - |
| rightIdFun | 自定义右面板row的id，此id用于行操作，及定义线条leftId与rightId，例 (row, index) => `rightId:${index}-${row.lineNo}`，第一个回调参数为行数据，第二个回调参数为行号，leftIdFun不存在则使用默认id| function |- | - |
| collapseMaxHeight | 用于设置面板最大高度 | number |- | - |
| collapseAccordion | 折叠面板是否开启手风琴模式(只展开一个面板) | boolean |- | false |
| popover | 移入行时是否使用 popover 展示行详细内容 | boolean |- | false |
| popoverEnterable | popover 是否可移入 | boolean |- | false |
| popoverHideDelay | popover 显示隐藏的延时，popoverEnterable为true时可用 | number |- | 200 |
#### 行id
左右面板默认使用多层结构，默认id格式为 面板选项卡-行号，即 L1-1、R1-2，L2-1、R2-2的格式。
> 自定义行id使用leftIdFun、rightIdFun属性。
### Methods
| 方法名 | 说明 | 参数 |
|-------- |------ |------ |
|link | 连接线的方法 | {leftIds, rightIds, color} |
|drawLine | 重绘线 |- |
|leftCheckRow | 左面板选中行的方法，参数为row的id |id |
|rightCheckRow | 右面板选中行的方法，参数为row的id |id |
|clearChecked | 全局清空选中面板 |- |
|checkLines | 选中线的方法，参数为要选中线条id组成的数组 | array |
|unCheckedLines | 用于取消线的选中状态的方法，参数为要清除线条id组成的数组 | array |
|clearCheckedLines | 用于清空选中线的方法 | - |
> 线的连接可以自定义，控制lines的增删来控制线，由于vue2.0还不能监听数组变化，因此需要用push,splice等方法操作数组。
### Events
| 事件名 | 说明 | 回调参数 |
|-------- |------ |------ |
|checkRow | 选中行时触发该事件 | id |
|unCheckRow | 取消选中行时触发该事件 | id |
|checkLine | 选中线时触发该事件 | id |
|unCheckLine | 取消选中线时触发该事件 | id |
|leftCheckChange | 左面板选中行时触发该事件 | array |
|rightCheckChange | 右面板选中行时触发该事件 | array |
|delete | 删除线条时触发该事件 | id |
### 版本
#### 1.0.31
- 滚动增加debounce、线重绘增加throttle，优化组件性能。
#### 1.0.30
- 解决多线条选中，背景高亮显示不正确的问题。
#### 1.0.29
- 整合解决滚动导致偏移的问题。
#### 1.0.28
- 迁移rollup。
- 线条选中时，线对应的 table 行背景高亮。
[历史版本](https://github.com/blryli/vue-matchup/blob/master/VERSION.md)