dv-border-box-9
@@ -152,6 +178,26 @@ title|边框标题|`String`|`-`|`''`
titleWidth|标题宽度|`Number`|`-`|`250`
+## dv-border-box-12
+
+ dv-border-box-12
+
+
+```html
+
dv-border-box-12
+```
+
+
+## dv-border-box-13
+
+ dv-border-box-13
+
+
+```html
+
dv-border-box-13
+```
+
+
+
+
diff --git a/docs/DataV/index.js b/docs/DataV/index.js
index a894651..a74ae6b 100644
--- a/docs/DataV/index.js
+++ b/docs/DataV/index.js
@@ -40,6 +40,7 @@ import capsuleChart from './components/capsuleChart'
import waterLevelPond from './components/waterLevelPond/index'
import percentPond from './components/percentPond/index'
import flylineChart from './components/flylineChart'
+import flylineChartEnhanced from './components/flylineChartEnhanced'
import conicalColumnChart from './components/conicalColumnChart'
import digitalFlop from './components/digitalFlop'
import scrollBoard from './components/scrollBoard/index'
@@ -88,6 +89,7 @@ export default function (Vue) {
Vue.use(waterLevelPond)
Vue.use(percentPond)
Vue.use(flylineChart)
+ Vue.use(flylineChartEnhanced)
Vue.use(conicalColumnChart)
Vue.use(digitalFlop)
Vue.use(scrollBoard)
From 09c9e63209e488cb5286e73e14577995d0de71d2 Mon Sep 17 00:00:00 2001
From: JM <743192023@qq.com>
Date: Sun, 5 Jan 2020 22:26:17 +0800
Subject: [PATCH 33/63] update 2020-01-05
---
docs/.vuepress/components/dev.vue | 34 +-
docs/.vuepress/config.js | 1 +
.../flylineChartEnhanced/src/main.vue | 304 ++++++++++++++++--
.../codeData/flylineChartEnhanced/demo1.js | 147 +++++++++
.../codeData/flylineChartEnhanced/demo2.js | 156 +++++++++
.../codeData/flylineChartEnhanced/demo3.js | 162 ++++++++++
.../codeData/flylineChartEnhanced/demo4.js | 165 ++++++++++
.../codeData/flylineChartEnhanced/demo5.js | 166 ++++++++++
.../codeData/flylineChartEnhanced/demo6.js | 184 +++++++++++
.../codeData/flylineChartEnhanced/index.js | 15 +
docs/guide/flylineChart.md | 4 +
docs/guide/flylineChartEnhanced.md | 233 ++++++++++++++
package.json | 2 +-
13 files changed, 1545 insertions(+), 28 deletions(-)
create mode 100644 docs/guide/codeData/flylineChartEnhanced/demo1.js
create mode 100644 docs/guide/codeData/flylineChartEnhanced/demo2.js
create mode 100644 docs/guide/codeData/flylineChartEnhanced/demo3.js
create mode 100644 docs/guide/codeData/flylineChartEnhanced/demo4.js
create mode 100644 docs/guide/codeData/flylineChartEnhanced/demo5.js
create mode 100644 docs/guide/codeData/flylineChartEnhanced/demo6.js
create mode 100644 docs/guide/codeData/flylineChartEnhanced/index.js
create mode 100644 docs/guide/flylineChartEnhanced.md
diff --git a/docs/.vuepress/components/dev.vue b/docs/.vuepress/components/dev.vue
index bc39527..3cd2638 100644
--- a/docs/.vuepress/components/dev.vue
+++ b/docs/.vuepress/components/dev.vue
@@ -1,6 +1,6 @@
-
+
@@ -12,18 +12,34 @@ export default {
config: {
points: [
{
- name: 'P1',
- coordinate: [0.3, 0.3]
+ name: '驻马店',
+ coordinate: [0.3, 0.3],
},
{
- name: 'P2',
- coordinate: [0.5, 0.5]
+ name: '南阳',
+ coordinate: [0.5, 0.5],
+ halo: { show: false }
}
- ]
+ ],
+ lines: [
+ {
+ source: '驻马店',
+ target: '南阳'
+ }
+ ],
+ halo: {
+ show: true
+ },
+ icon: {
+ show: true,
+ src: '/img/flylineChart/mapPoint.png'
+ },
+ text: {
+ show: true
+ },
+ bgImgSrc: '/img/flylineChart/map.jpg'
}
}
- },
- async mounted () {
}
}
@@ -31,7 +47,7 @@ export default {
\ No newline at end of file
diff --git a/package.json b/package.json
index 4426bad..cfa5748 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,6 @@
"vuepress": "1.0.3"
},
"dependencies": {
- "@jiaminghi/charts": "0.2.8"
+ "@jiaminghi/charts": "^0.2.11"
}
}
From 64d3bdc301b74787e81656048f104f8377182342 Mon Sep 17 00:00:00 2001
From: JM <743192023@qq.com>
Date: Wed, 8 Jan 2020 14:18:12 +0800
Subject: [PATCH 34/63] update
---
docs/guide/flylineChart.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/guide/flylineChart.md b/docs/guide/flylineChart.md
index dbbde98..3230642 100644
--- a/docs/guide/flylineChart.md
+++ b/docs/guide/flylineChart.md
@@ -5,7 +5,7 @@ sidebarDepth: 2
# 飞线图
::: tip TIP
-建议使用[飞线图增强版](/guide/flylineChartEnhanced)。
+建议使用[飞线图增强版](/guide/flylineChartEnhanced.html)。
:::
设置一个中心点，若干飞线点，即可得到动态飞线图，组件提供的[dev模式](/guide/flylineChart.html#dev模式)可以帮你快速配置飞线点位置。
From fb8885ad009e32594af7078940ac20471ec29129 Mon Sep 17 00:00:00 2001
From: JM <743192023@qq.com>
Date: Fri, 10 Jan 2020 14:32:31 +0800
Subject: [PATCH 35/63] update 2020-01-10
---
docs/.vuepress/components/dev.vue | 42 +++++++++----------
.../components/activeRingChart/src/main.vue | 10 ++++-
.../flylineChartEnhanced/src/main.vue | 2 -
docs/guide/activeRingChart.md | 1 +
4 files changed, 30 insertions(+), 25 deletions(-)
diff --git a/docs/.vuepress/components/dev.vue b/docs/.vuepress/components/dev.vue
index 3cd2638..7cb22ac 100644
--- a/docs/.vuepress/components/dev.vue
+++ b/docs/.vuepress/components/dev.vue
@@ -1,6 +1,6 @@
-
+
@@ -10,34 +10,34 @@ export default {
data () {
return {
config: {
- points: [
+ radius: '40%',
+ activeRadius: '45%',
+ data: [
{
- name: '驻马店',
- coordinate: [0.3, 0.3],
+ name: '周口',
+ value: 55
},
{
name: '南阳',
- coordinate: [0.5, 0.5],
- halo: { show: false }
- }
- ],
- lines: [
+ value: 120
+ },
+ {
+ name: '西峡',
+ value: 78
+ },
{
- source: '驻马店',
- target: '南阳'
+ name: '驻马店',
+ value: 66
+ },
+ {
+ name: '新乡',
+ value: 80
}
],
- halo: {
- show: true
- },
- icon: {
- show: true,
- src: '/img/flylineChart/mapPoint.png'
- },
- text: {
- show: true
+ digitalFlopStyle: {
+ fontSize: 20
},
- bgImgSrc: '/img/flylineChart/map.jpg'
+ digitalFlopToFixed: 3
}
}
}
diff --git a/docs/DataV/components/activeRingChart/src/main.vue b/docs/DataV/components/activeRingChart/src/main.vue
index 63e75ef..fe6a6bf 100644
--- a/docs/DataV/components/activeRingChart/src/main.vue
+++ b/docs/DataV/components/activeRingChart/src/main.vue
@@ -78,6 +78,11 @@ export default {
fontSize: 25,
fill: '#fff'
},
+ /**
+ * @description Digital flop toFixed
+ * @type {Number}
+ */
+ digitalFlopToFixed: 0,
/**
* @description CRender animationCurve
* @type {String}
@@ -107,7 +112,7 @@ export default {
if (!mergedConfig) return {}
- const { digitalFlopStyle, data } = mergedConfig
+ const { digitalFlopStyle, digitalFlopToFixed, data } = mergedConfig
const value = data.map(({ value }) => value)
@@ -118,7 +123,8 @@ export default {
return {
content: '{nt}%',
number: [percent],
- style: digitalFlopStyle
+ style: digitalFlopStyle,
+ toFixed: digitalFlopToFixed
}
},
ringName () {
diff --git a/docs/DataV/components/flylineChartEnhanced/src/main.vue b/docs/DataV/components/flylineChartEnhanced/src/main.vue
index 0ef519d..5aed57f 100644
--- a/docs/DataV/components/flylineChartEnhanced/src/main.vue
+++ b/docs/DataV/components/flylineChartEnhanced/src/main.vue
@@ -472,8 +472,6 @@ export default {
const { relative, points } = mergedConfig
- if (!relative) return
-
this.flylinePoints = points.map((item, i) => {
const { coordinate: [x, y], halo, icon, text } = item
diff --git a/docs/guide/activeRingChart.md b/docs/guide/activeRingChart.md
index 560958f..176939f 100644
--- a/docs/guide/activeRingChart.md
+++ b/docs/guide/activeRingChart.md
@@ -54,6 +54,7 @@ lineWidth|环线条宽度|`Number`|---|`20`
activeTimeGap|切换间隔(ms)|`Number`|---|`3000`
color|环颜色|`Array
`|[1]|`[]`
digitalFlopStyle|数字翻牌器样式|`Object`|---|[2]
+digitalFlopToFixed|数字翻牌器小数位数|`Number`|---|`0`
animationCurve|动效曲线|`String`|[Transition](http://transition.jiaminghi.com/curveTable/)|`'easeOutCubic'`
animationFrame|动效帧数|`Number`|[3]|`50`
From 02f877388dd21318182249e28e2845c9c78ee088 Mon Sep 17 00:00:00 2001
From: JM <743192023@qq.com>
Date: Fri, 10 Jan 2020 15:08:13 +0800
Subject: [PATCH 36/63] add update demo
---
docs/guide/README.md | 10 +++++++
docs/guide/vueDemo/update.vue | 50 +++++++++++++++++++++++++++++++++++
2 files changed, 60 insertions(+)
create mode 100644 docs/guide/vueDemo/update.vue
diff --git a/docs/guide/README.md b/docs/guide/README.md
index 3b3d7e8..90a4c07 100644
--- a/docs/guide/README.md
+++ b/docs/guide/README.md
@@ -20,6 +20,10 @@
::: tip TIP
建议使用Chrome浏览器。
+:::
+
+::: danger 用前必看
+避免你的组件更新了数据后，状态却不刷新，也就是没变化，请务必看这里
组件props均未设置`deep`监听，刷新props时，请直接生成**新的props**，请勿直接更新props下某一个属性，这样组件将无法刷新状态。
@@ -28,6 +32,12 @@
`this.someProps = { someAttr: ['foo', 'foo'] }`才是有效的
:::
+**建议的更新数据的方式**
+
+
+<<< @/docs/guide/vueDemo/update.vue
+
+
## 安装
* npm安装
diff --git a/docs/guide/vueDemo/update.vue b/docs/guide/vueDemo/update.vue
new file mode 100644
index 0000000..8d76022
--- /dev/null
+++ b/docs/guide/vueDemo/update.vue
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+
From 502824325a9209711c9ab8bbe159816ec719564d Mon Sep 17 00:00:00 2001
From: JM <743192023@qq.com>
Date: Thu, 16 Jan 2020 10:24:29 +0800
Subject: [PATCH 37/63] update 2020-01-16
---
docs/.vuepress/components/dev.vue | 44 +++++++------------
.../components/activeRingChart/src/main.vue | 2 +-
2 files changed, 18 insertions(+), 28 deletions(-)
diff --git a/docs/.vuepress/components/dev.vue b/docs/.vuepress/components/dev.vue
index 7cb22ac..157fd52 100644
--- a/docs/.vuepress/components/dev.vue
+++ b/docs/.vuepress/components/dev.vue
@@ -10,34 +10,24 @@ export default {
data () {
return {
config: {
- radius: '40%',
- activeRadius: '45%',
+ color: ['#e8dd82','#ff34a3','#c716e8','#4ae814','#100de8','#e80700','#797B7F','#CFB2A9','#DE9325','#7FAE90','#9FDABF','#E98F6F','#6AB0B8','#334B5C','#fc0503'],
+ lineWidth: 30,
+ radius: '55%',
+ activeRadius: '60%',
+ digitalFlopToFixed: 2,
data: [
- {
- name: '周口',
- value: 55
- },
- {
- name: '南阳',
- value: 120
- },
- {
- name: '西峡',
- value: 78
- },
- {
- name: '驻马店',
- value: 66
- },
- {
- name: '新乡',
- value: 80
- }
- ],
- digitalFlopStyle: {
- fontSize: 20
- },
- digitalFlopToFixed: 3
+ { value: 1799, name: "公安"},
+ { value: 1789, name: "人社"},
+ { value: 1043, name: "医保"},
+ { value: 787, name: "住建"},
+ { value: 587, name: "总工会"},
+ { value: 251, name: "档案"},
+ { value: 136, name: "民政"},
+ { value: 46, name: "卫健"},
+ { value: 35, name: "残联"},
+ { value: 19, name: "公安1"},
+ { value: 7, name: "粮食"}
+ ]
}
}
}
diff --git a/docs/DataV/components/activeRingChart/src/main.vue b/docs/DataV/components/activeRingChart/src/main.vue
index fe6a6bf..aa4f09a 100644
--- a/docs/DataV/components/activeRingChart/src/main.vue
+++ b/docs/DataV/components/activeRingChart/src/main.vue
@@ -118,7 +118,7 @@ export default {
const sum = value.reduce((all, v) => all + v, 0)
- const percent = parseInt(value[activeIndex] / sum * 100) || 0
+ const percent = parseFloat(value[activeIndex] / sum * 100) || 0
return {
content: '{nt}%',
From 1d377c16faded43950cb85c7cf368a6fd6caeccc Mon Sep 17 00:00:00 2001
From: JM <743192023@qq.com>
Date: Sat, 7 Mar 2020 21:06:45 +0800
Subject: [PATCH 38/63] update 2020-03-07
---
docs/guide/README.md | 16 +++++++++++++---
docs/guide/borderBox.md | 12 ++++++++++--
2 files changed, 23 insertions(+), 5 deletions(-)
diff --git a/docs/guide/README.md b/docs/guide/README.md
index 90a4c07..60a9928 100644
--- a/docs/guide/README.md
+++ b/docs/guide/README.md
@@ -18,11 +18,21 @@
飞线图/水位图/轮播表/...
-::: tip TIP
-建议使用Chrome浏览器。
+## 用前必看
+
+使用前应阅读以下提示，这样出现相应问题后可以快速解决。
+
+::: tip 兼容性
+组件库的开发和调试都使用Chrome浏览器，没有时间和精力做其他浏览器的兼容，尤其是IE。
+
+所以请使用Chrome浏览器。
+:::
+
+::: warning 宽高异常
+组件的默认宽高都是100%，可以根据父容器宽高进行自适应，但在某些情况下组件宽高可能表现异常，这种情况一般是因为组件的父容器宽高发生了变化，而组件没有侦知这一变化，你可以在组件上绑定key值，在更改父容器宽高且页面完成重绘后（使用$nextTick），更新key值，使组件强制刷新，以获取正确宽高。
:::
-::: danger 用前必看
+::: danger 状态更新
避免你的组件更新了数据后，状态却不刷新，也就是没变化，请务必看这里
组件props均未设置`deep`监听，刷新props时，请直接生成**新的props**，请勿直接更新props下某一个属性，这样组件将无法刷新状态。
diff --git a/docs/guide/borderBox.md b/docs/guide/borderBox.md
index 06b8a9e..08d5dd0 100644
--- a/docs/guide/borderBox.md
+++ b/docs/guide/borderBox.md
@@ -6,8 +6,16 @@ sidebarDepth: 2
边框均由**SVG**元素绘制，体积轻量不失真，它们的使用极为方便。
-::: tip TIP
-边框组件默认宽高均为100%，组件内容将被slot插槽分发至边框组件下class为`border-box-content`的容器内，如有布局需要，请针对该容器布局，以免产生样式冲突，导致边框显示异常。
+::: tip 边框内布局
+边框组件默认宽高均为100%，边框内部的节点将被slot插槽分发至边框组件下class为`border-box-content`的容器内，如有布局需要，请针对该容器布局，以免产生样式冲突，导致边框显示异常。
+:::
+
+::: warning 注意事项
+建议把边框内的节点封装成**组件**，**以组件的形式置入边框**。这是因为slot的渲染机制较为特殊，如果你要在组件mounted后对边框内置入的节点进行页面渲染状态敏感的操作（获取DOM宽高，实例化echarts图表等），可能会发生非预期的结果。比如获取的DOM宽高为0，封装成组件后可避免这种情况。
+:::
+
+::: tip 重置宽高
+如果边框组件的父容器宽高发生了变化，而边框组件没有侦知这一变化，边框就无法自适应父容器宽高。针对这种情况，你可以给边框绑定key值，在父容器宽高发生变化且完成渲染后更改key值，强制边框组件重新渲染，获取正确的宽高。但这会造成边框内的组件同样重新渲染，在某些时候这可能并不是我们想要的，此时我们可以调用组件内置的`initWH`方法去重置边框组件的宽高以避免重新渲染带来的非预期副作用。
:::
## 自定义颜色
From 28b84d2bb89a8d9364ab90c0fa24b2c002602394 Mon Sep 17 00:00:00 2001
From: JM <743192023@qq.com>
Date: Sun, 8 Mar 2020 14:52:35 +0800
Subject: [PATCH 39/63] update 2020-03-08
---
docs/guide/README.md | 32 ++++++++++++++++++++++++++++++++
1 file changed, 32 insertions(+)
diff --git a/docs/guide/README.md b/docs/guide/README.md
index 60a9928..c72960c 100644
--- a/docs/guide/README.md
+++ b/docs/guide/README.md
@@ -48,8 +48,39 @@
<<< @/docs/guide/vueDemo/update.vue
+## 创建Vue项目
+
+组件库依赖vue，要想使用它，创建一个Vue项目当然是必须的，如果已有Vue项目或使用UMD版开发可跳过此步骤。
+
+**安装Vue/Cli**
+
+* npm安装
+
+```
+npm i -g @vue/cli
+```
+
+* yarn安装
+
+```
+yarn global add @vue/cli
+```
+
+**创建Vue项目**
+
+```
+vue create datav-project
+```
+
+[Vue/Cli官网](https://cli.vuejs.org/zh/)
+
## 安装
+```sh
+cd datav-project
+```
+在Vue项目下进行组件库安装。
+
* npm安装
```sh
@@ -57,6 +88,7 @@ npm install @jiaminghi/data-view
```
* yarn安装
+
```sh
yarn add @jiaminghi/data-view
```
From a4fae53dbb27f604da1f782003f555726e6585ee Mon Sep 17 00:00:00 2001
From: JM <743192023@qq.com>
Date: Wed, 11 Mar 2020 17:13:55 +0800
Subject: [PATCH 40/63] update 2020-03-11
---
docs/guide/borderBox.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/guide/borderBox.md b/docs/guide/borderBox.md
index 08d5dd0..5aa2070 100644
--- a/docs/guide/borderBox.md
+++ b/docs/guide/borderBox.md
@@ -15,7 +15,7 @@ sidebarDepth: 2
:::
::: tip 重置宽高
-如果边框组件的父容器宽高发生了变化，而边框组件没有侦知这一变化，边框就无法自适应父容器宽高。针对这种情况，你可以给边框绑定key值，在父容器宽高发生变化且完成渲染后更改key值，强制边框组件重新渲染，获取正确的宽高。但这会造成边框内的组件同样重新渲染，在某些时候这可能并不是我们想要的，此时我们可以调用组件内置的`initWH`方法去重置边框组件的宽高以避免重新渲染带来的非预期副作用。
+如果边框组件的父容器宽高发生了变化，而边框组件没有侦知这一变化，边框就无法自适应父容器宽高。针对这种情况，你可以给边框绑定key值，在父容器宽高发生变化且完成渲染后更改key值，强制边框组件重新渲染，获取正确的宽高。但这会造成边框内的组件同样重新渲染，在某些时候这可能并不是我们想要的，此时我们可以调用组件内置的`initWH`方法去重置边框组件的宽高以避免重新渲染带来的非预期副作用。（边框1和边框10没有内置这个方法，因为它们的自适应由CSS完成，并不依赖宽高的具体数值）
:::
## 自定义颜色
From 28cc4422c24c942a49eb5daa8df47130add33e36 Mon Sep 17 00:00:00 2001
From: JM <743192023@qq.com>
Date: Wed, 11 Mar 2020 18:16:21 +0800
Subject: [PATCH 41/63] update 2020-03-11
---
docs/guide/README.md | 8 ++-----
docs/guide/vueDemo/update.vue | 45 +++++++++++++----------------------
2 files changed, 19 insertions(+), 34 deletions(-)
diff --git a/docs/guide/README.md b/docs/guide/README.md
index c72960c..c133f71 100644
--- a/docs/guide/README.md
+++ b/docs/guide/README.md
@@ -35,14 +35,10 @@
::: danger 状态更新
避免你的组件更新了数据后，状态却不刷新，也就是没变化，请务必看这里
-组件props均未设置`deep`监听，刷新props时，请直接生成**新的props**，请勿直接更新props下某一个属性，这样组件将无法刷新状态。
-
-`this.someProps.someAttr = ['foo', 'foo']`是无效的
-
-`this.someProps = { someAttr: ['foo', 'foo'] }`才是有效的
+组件props均未设置`deep`监听，刷新props时，请直接生成**新的props对象**（基础数据类型除外），或完成赋值操作后使用ES6拓展运算符生成新的props对象（`this.someProps = { ...this.someProps }`）。
:::
-**建议的更新数据的方式**
+**具体更新数据示例**
<<< @/docs/guide/vueDemo/update.vue
diff --git a/docs/guide/vueDemo/update.vue b/docs/guide/vueDemo/update.vue
index 8d76022..364b368 100644
--- a/docs/guide/vueDemo/update.vue
+++ b/docs/guide/vueDemo/update.vue
@@ -1,6 +1,6 @@
-
+
@@ -9,41 +9,30 @@ export default {
name: 'UpdateDemo',
data () {
return {
- // data写好默认配置
config: {
- header: ['列1', '列2', '列3'],
- data: [],
- index: true,
- columnWidth: [50],
- align: ['center']
+ value: 66,
+ lineDash: [10, 2]
}
}
},
methods: {
+ // 更新数据的示例方法
updateHandler () {
- const { config, getScrollBoardData } = this
+ const { config } = this
- const data = getScrollBoardData()
+ /**
+ * 只是这样做是无效
+ * config指向的内存地址没有发生变化
+ * 组件无法侦知数据变化
+ */
+ this.config.value = 90
+ this.config.lineDash = [10, 4]
- // 生成新的config 并使用新的data覆盖原有config中的data
- this.config = {
- ...config,
- data
- }
- },
- getScrollBoardData () {
- return [
- ['行1列1', '行1列2', '行1列3'],
- ['行2列1', '行2列2', '行2列3'],
- ['行3列1', '行3列2', '行3列3'],
- ['行4列1', '行4列2', '行4列3'],
- ['行5列1', '行5列2', '行5列3'],
- ['行6列1', '行6列2', '行6列3'],
- ['行7列1', '行7列2', '行7列3'],
- ['行8列1', '行8列2', '行8列3'],
- ['行9列1', '行9列2', '行9列3'],
- ['行10列1', '行10列2', '行10列3']
- ]
+ /**
+ * 使用ES6拓展运算符生成新的props对象
+ * 组件侦知数据变化 自动刷新状态
+ */
+ this.config = { ...this.config }
}
}
}
From 551b404f5b44a135e0e100801bead7aacef1e84d Mon Sep 17 00:00:00 2001
From: JM <743192023@qq.com>
Date: Wed, 11 Mar 2020 18:59:18 +0800
Subject: [PATCH 42/63] update 2020-03-11
---
docs/.vuepress/components/dev.vue | 27 ++++++---------------------
1 file changed, 6 insertions(+), 21 deletions(-)
diff --git a/docs/.vuepress/components/dev.vue b/docs/.vuepress/components/dev.vue
index 157fd52..1edcc17 100644
--- a/docs/.vuepress/components/dev.vue
+++ b/docs/.vuepress/components/dev.vue
@@ -1,34 +1,19 @@
-
+
diff --git a/docs/DataV/components/borderBox11/src/main.vue b/docs/DataV/components/borderBox11/src/main.vue
index dfa2901..d042cf3 100644
--- a/docs/DataV/components/borderBox11/src/main.vue
+++ b/docs/DataV/components/borderBox11/src/main.vue
@@ -216,6 +216,7 @@
diff --git a/docs/DataV/components/scrollBoard/src/main.vue b/docs/DataV/components/scrollBoard/src/main.vue
index 2e82860..2d64cd2 100644
--- a/docs/DataV/components/scrollBoard/src/main.vue
+++ b/docs/DataV/components/scrollBoard/src/main.vue
@@ -37,7 +37,9 @@
:style="`width: ${widths[ci]}px;`"
:align="aligns[ci]"
v-html="ceil"
- @click="emitEvent(ri, ci, row, ceil)"
+ @click="emitEvent('click', ri, ci, row, ceil)"
+ @mouseenter="handleHover(true, ri, ci, row, ceil)"
+ @mouseleave="handleHover(false)"
/>
@@ -146,7 +148,14 @@ export default {
* @default carousel = 'single'
* @example carousel = 'single' | 'page'
*/
- carousel: 'single'
+ carousel: 'single',
+ /**
+ * @description Pause scroll when mouse hovered
+ * @type {Boolean}
+ * @default hoverPause = true
+ * @example hoverPause = true | false
+ */
+ hoverPause: true
},
mergedConfig: null,
@@ -182,6 +191,18 @@ export default {
}
},
methods: {
+ handleHover(enter, ri, ci, row, ceil){
+ const { mergedConfig, emitEvent, stopAnimation, animation } = this
+
+ if (enter) emitEvent('mouseover', ri, ci, row, ceil)
+ if (!mergedConfig.hoverPause) return
+
+ if (enter) {
+ stopAnimation()
+ } else {
+ animation(true)
+ }
+ },
afterAutoResizeMixinInit () {
const { calcData } = this
@@ -355,10 +376,10 @@ export default {
clearTimeout(animationHandler)
},
- emitEvent (ri, ci, row, ceil) {
+ emitEvent (type, ri, ci, row, ceil) {
const { ceils, rowIndex } = row
- this.$emit('click', {
+ this.$emit(type, {
row: ceils,
ceil,
rowIndex,
diff --git a/docs/guide/scrollBoard.md b/docs/guide/scrollBoard.md
index 3d5a56b..20fce20 100644
--- a/docs/guide/scrollBoard.md
+++ b/docs/guide/scrollBoard.md
@@ -88,6 +88,7 @@ align|列对齐方式|`Array
