update dist and lib

dist/datav.map.vue.js

@@ -22984,7 +22984,15 @@
            * @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,
         header: [],
@@ -23012,6 +23020,23 @@
 
     },
     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
@@ -23214,12 +23239,12 @@
         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,
@@ -23311,7 +23336,13 @@
                     domProps: { innerHTML: _vm._s(ceil) },
                     on: {
                       click: function($event) {
-                        return _vm.emitEvent(ri, ci, row, ceil)
+                        return _vm.emitEvent("click", ri, ci, row, ceil)
+                      },
+                      mouseenter: function($event) {
+                        return _vm.handleHover(true, ri, ci, row, ceil)
+                      },
+                      mouseleave: function($event) {
+                        return _vm.handleHover(false)
                       }
                     }
                   })
@@ -23330,7 +23361,7 @@
     /* style */
     const __vue_inject_styles__$z = function (inject) {
       if (!inject) return
-      inject("data-v-1aad958a_0", { source: ".dv-scroll-board {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n}\n.dv-scroll-board .text {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .header {\n  display: flex;\n  flex-direction: row;\n  font-size: 15px;\n}\n.dv-scroll-board .header .header-item {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows {\n  overflow: hidden;\n}\n.dv-scroll-board .rows .row-item {\n  display: flex;\n  font-size: 14px;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows .ceil {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .rows .index {\n  border-radius: 3px;\n  padding: 0px 3px;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,WAAW;AACb;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;AACzB;AACA;EACE,aAAa;EACb,mBAAmB;EACnB,eAAe;AACjB;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;EACvB,oBAAoB;AACtB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,aAAa;EACb,eAAe;EACf,oBAAoB;AACtB;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;AACzB;AACA;EACE,kBAAkB;EAClB,gBAAgB;AAClB","file":"main.vue","sourcesContent":[".dv-scroll-board {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n}\n.dv-scroll-board .text {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .header {\n  display: flex;\n  flex-direction: row;\n  font-size: 15px;\n}\n.dv-scroll-board .header .header-item {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows {\n  overflow: hidden;\n}\n.dv-scroll-board .rows .row-item {\n  display: flex;\n  font-size: 14px;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows .ceil {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .rows .index {\n  border-radius: 3px;\n  padding: 0px 3px;\n}\n"]}, media: undefined });
+      inject("data-v-64cbfe00_0", { source: ".dv-scroll-board {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n}\n.dv-scroll-board .text {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .header {\n  display: flex;\n  flex-direction: row;\n  font-size: 15px;\n}\n.dv-scroll-board .header .header-item {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows {\n  overflow: hidden;\n}\n.dv-scroll-board .rows .row-item {\n  display: flex;\n  font-size: 14px;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows .ceil {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .rows .index {\n  border-radius: 3px;\n  padding: 0px 3px;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,WAAW;AACb;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;AACzB;AACA;EACE,aAAa;EACb,mBAAmB;EACnB,eAAe;AACjB;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;EACvB,oBAAoB;AACtB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,aAAa;EACb,eAAe;EACf,oBAAoB;AACtB;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;AACzB;AACA;EACE,kBAAkB;EAClB,gBAAgB;AAClB","file":"main.vue","sourcesContent":[".dv-scroll-board {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n}\n.dv-scroll-board .text {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .header {\n  display: flex;\n  flex-direction: row;\n  font-size: 15px;\n}\n.dv-scroll-board .header .header-item {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows {\n  overflow: hidden;\n}\n.dv-scroll-board .rows .row-item {\n  display: flex;\n  font-size: 14px;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows .ceil {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .rows .index {\n  border-radius: 3px;\n  padding: 0px 3px;\n}\n"]}, media: undefined });
 
     };
     /* scoped */

lib/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)"
         />
 
       </div>
@@ -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,