feat: add startAnimation

NightCatSama · Aug 11, 2018 · fa187fc · fa187fc
1 parent 2b18f2c
commit fa187fc
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -137,6 +137,7 @@ import vueSlider from 'vue-slider-component/src/vue2-slider.vue'
 | value       | Number, String, Array, Object  | 0        | Initial value (if the value for the array open range model) |
 | data        | Array         | null     | The custom data. |
 | clickable   | Boolean       | true     | Whether or not the slider is clickable as well as drag-able |
+| startAnimation | Boolean    | false    | Whether to enable the initial animation |
 | tooltip-merge* | Boolean       | true    | Whether to merge with tooltip overlap |
 | merge-formatter* | String, Function  | null    | Formatting of the merged value, for example: `merge-formatter="¥{value1} ~ ¥{value2}"` or `` merge-formatter: (v1, v2) => `¥${v1} ~ ¥${v2}` ``. |
 | stop-propagation*  | Boolean       | false    | All events call `stopPropagation` |

diff --git a/dist/index.js b/dist/index.js
diff --git a/example/dist/build.js b/example/dist/build.js
diff --git a/example/src/demo.vue b/example/src/demo.vue
@@ -3,7 +3,7 @@
     <h1>Example</h1>
     <section data-title="Default" id="demo">
       <div>
-        <vue-slider ref="slider" v-model="demo.default.customProp.value" v-bind="demo.default"></vue-slider>
+        <vue-slider ref="slider" v-model="demo.default.value" v-bind="demo.default"></vue-slider>
         <h3><small>Value: </small>{{ demo.default.value }}</h3>
       </div>
       <div>
@@ -228,10 +228,7 @@ export default {
       orange_cat: 'http://7xqnme.com1.z0.glb.clouddn.com/17-6-8/88421800.jpg',
       demo: {
         default: {
-          customProp: {
-            value: 2
-          },
-          // value: void 0,
+          value: 50,
           width: 'auto',
           height: 6,
           direction: 'horizontal',
@@ -240,8 +237,9 @@ export default {
           min: 0,
           max: 100,
           interval: 1,
+          startAnimation: false,
           tooltipMerge: true,
-          // debug: process && process.env && process.env.NODE_ENV !== 'production',
+          debug: process && process.env && process.env.NODE_ENV !== 'production',
           disabled: false,
           show: true,
           realTime: false,
@@ -488,6 +486,7 @@ export default {
           piecewiseStyle: '分割点的样式',
           disabledStyle: '组件禁用状态下样式',
           focusStyle: '键盘控制时，算滑块获得焦点时样式',
+          startAnimation: '是否开启初始动画',
           value: '值'
         }
       },

diff --git a/example/src/vue-slider/vue2-slider.vue b/example/src/vue-slider/vue2-slider.vue
@@ -271,6 +271,10 @@
         type: Boolean,
         default: true
       },
+      startAnimation: {
+        type: Boolean,
+        default: false
+      },
       sliderStyle: [Array, Object, Function],
       focusStyle: [Array, Object, Function],
       tooltipDir: [Array, String],
@@ -1035,7 +1039,7 @@
       this.$nextTick(() => {
         if (this.isComponentExists) {
           this.getStaticData()
-          this.setValue(this.limitValue(this.value), true, 0)
+          this.setValue(this.limitValue(this.value), true, this.startAnimation ? this.speed : 0)
           this.bindEvents()
         }
       })

diff --git a/src/vue2-slider.vue b/src/vue2-slider.vue
@@ -271,6 +271,10 @@
         type: Boolean,
         default: true
       },
+      startAnimation: {
+        type: Boolean,
+        default: false
+      },
       sliderStyle: [Array, Object, Function],
       focusStyle: [Array, Object, Function],
       tooltipDir: [Array, String],
@@ -1035,7 +1039,7 @@
       this.$nextTick(() => {
         if (this.isComponentExists) {
           this.getStaticData()
-          this.setValue(this.limitValue(this.value), true, 0)
+          this.setValue(this.limitValue(this.value), true, this.startAnimation ? this.speed : 0)
           this.bindEvents()
         }
       })