fixbug and add a callback function

tansj526 · Aug 22, 2016 · adcd574 · adcd574
1 parent cc332bf
commit adcd574
Show file tree

Hide file tree

Showing 7 changed files with 660 additions and 110 deletions.
diff --git a/vue-range/README.md b/vue-range/README.md
@@ -67,4 +67,9 @@ html
 $ npm install
 
 $ npm run dev
-```
+```
+
+## Version
+
+#### 0.1.0
+fixbug & add a callback function
diff --git a/vue-range/dist/vue-range.js b/vue-range/dist/vue-range.js
diff --git a/vue-range/example/index.html b/vue-range/example/index.html
@@ -12,7 +12,7 @@
 </head>
 <body>
   <div id="app">
-    <vue-range :value.sync="val" ></vue-range>
+    <vue-range :value.sync="val" :end-func="endFn"></vue-range>
     {{ val }}
     <br>
     <br>

diff --git a/vue-range/example/index.js b/vue-range/example/index.js
@@ -9,6 +9,11 @@ new Vue({
     valStep: 10,
     max: 80
   },
+  methods: {
+    endFn(){
+      alert('end at: ' + this.val)
+    }
+  },
   components: {
     vueRange
   }

diff --git a/vue-range/index.js b/vue-range/index.js
@@ -0,0 +1 @@
+module.exports = require('./dist/vue-range')
diff --git a/vue-range/package.json b/vue-range/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-range",
-  "version": "0.0.3",
-  "description": "a vue input-range component ",
+  "version": "0.1.0",
+  "description": "a vue similar-input-range component ",
   "main": "index.js",
   "scripts": {
     "test": "npm test",

diff --git a/vue-range/src/index.vue b/vue-range/src/index.vue
@@ -1,23 +1,22 @@
 <template>
-<div class="vue-range" :class="{ 'vue-range--disabled': disabled }">
-  <slot name="start"></slot>
-  <div class="vue-range-content" v-el:content>
-    <div class="vue-range-runway" :style="{ 'border-top-width': barHeight + 'px' }"></div>
-    <div class="vue-range-progress" :style="{ width: progress + '%', height: barHeight + 'px' }"></div>
-    <div class="vue-range-thumb" v-el:thumb :style="{ left: progress + '%' }"></div>
-  </div>
-  <slot name="end"></slot>
-</div>
+    <div class="vue-range">
+        <slot name="start"></slot>
+        <div class="vue-range-content" v-el:content>
+            <div class="vue-range-railway" :style="{'border-top-width': barHeight + 'px'}"></div>
+            <div class="vue-range-bar" :style="{width: progress + '%', 'height': barHeight + 'px'}"></div>
+            <div class="vue-range-handle" v-el:handle :style="{left: progress + '%'}"></div>
+        </div>
+        <slot name="end"></slot>
+    </div>
 </template>
 
-<script>
 
+<script>
 let isDragging = false;
 const supportTouch = 'ontouchstart' in window;
 
 let draggable = function(element, options) {
   const moveFn = function(event) {
-    console.log(event)
     if (options.drag) {
       options.drag(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
     }
@@ -63,98 +62,107 @@ let draggable = function(element, options) {
 };
 
 export default {
-  name: 'vue-range',
-  props: {
-    min: {
-      type: Number,
-      default: 0
-    },
-    max: {
-      type: Number,
-      default: 100
-    },
-    step: {
-      type: Number,
-      default: 1
-    },
-    disabled: {
-      type: Boolean,
-      default: false
+    name: 'vue-range',
+    props: {
+        min: {
+            type: Number,
+            default: 0
+        },
+        max: {
+            type: Number,
+            default: 100
+        },
+        step: {
+            type: Number,
+            default: 1
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        value: {
+            type: Number
+        },
+        barHeight: {
+            type: Number,
+            default: 1
+        },
+        endFunc: {
+            type: Function,
+            default: ()=>{}
+        }
     },
-    value: {
-      type: Number
+    computed: {
+        progress() {
+            const value = this.value;
+            if(typeof value === 'undefined' || value == null) return 0;
+            return Math.floor((value - this.min) / (this.max - this.min) * 100)
+        }
     },
-    barHeight: {
-      type: Number,
-      default: 1
-    }
-  },
-  computed: {
-    progress() {
-      const value = this.value;
-      if (typeof value === 'undefined' || value === null) return 0;
-      return Math.floor((value - this.min) / (this.max - this.min) * 100);
-    }
-  },
-  ready() {
-    const { thumb, content } = this.$els;
-
-    const getThumbPosition = () => {
-      const contentBox = content.getBoundingClientRect();
-      const thumbBox = thumb.getBoundingClientRect();
-
-      return {
-        left: thumbBox.left - contentBox.left,
-        top: thumbBox.top - contentBox.top
-      };
-    };
-
-    let dragState = {};
-    draggable(thumb, {
-      start: () => {
-        if (this.disabled) return;
-        const position = getThumbPosition();
-        dragState = {
-          thumbStartLeft: position.left,
-          thumbStartTop: position.top
-        };
-      },
-      drag: (event) => {
-        if (this.disabled) return;
-        const contentBox = content.getBoundingClientRect();
-        const deltaX = event.pageX - contentBox.left - dragState.thumbStartLeft;
-        const stepCount = Math.ceil((this.max - this.min) / this.step);
-        const newPosition = (dragState.thumbStartLeft + deltaX) - (dragState.thumbStartLeft + deltaX) % (contentBox.width / stepCount);
-
-        let newProgress = newPosition / contentBox.width;
-
-        if (newProgress < 0) {
-          newProgress = 0;
-        } else if (newProgress > 1) {
-          newProgress = 1;
+    ready(){
+        const _self = this;
+        const {content, handle} = this.$els;
+
+        const handlePos = () => {
+            const contentBox = content.getBoundingClientRect();
+            const handleBox = handle.getBoundingClientRect();
+
+            return {
+                left: handleBox.left - contentBox.left,
+                top: handleBox.top - contentBox.top
+            }
         }
 
-        this.value = Math.round(this.min + newProgress * (this.max - this.min));
-      },
-      end: () => {
-        if (this.disabled) return;
-        dragState = {};
-      }
-    });
-  }
-};
+        let dragState = {};
+
+        draggable(handle, {
+            start: () => {
+                if(this.disabled) return;
+                const position = handlePos();
+                dragState = {
+                    handleStartLeft: position.left,
+                    handleStartTop: position.top
+                }
+            },
+            drag: (event) => {
+                if(this.disabled) return;
+                const contentBox = content.getBoundingClientRect();
+                const deltaX = event.pageX - contentBox.left - dragState.handleStartLeft;
+                const stepTotalCount = Math.ceil((this.max - this.min) / this.step)
+                const newPosition = (dragState.handleStartLeft + deltaX) - (dragState.handleStartLeft + deltaX) % (contentBox.width / stepTotalCount);
+
+                let newProgress = newPosition / contentBox.width;
+                // console.log(deltaX/contentBox*100);
+
+                if(newProgress < 0){
+                    newProgress = 0
+                }else if(newProgress > 1) {
+                    newProgress = 1;
+                }
+
+                this.value = Math.round(this.min + newProgress * (this.max-this.min))
+            },
+            end: () => {
+                if(this.disabled) return;
+                dragState = {}
+                typeof _self.endFunc === 'function' && _self.endFunc();
+            }
+        });
+    }
+}
+
 </script>
 
-<style scoped>
+<style>
 .vue-range {
-  position: relative;
-  display: flex;
-  height: 30px;
-  line-height: 30px;
+    position: relative;
+    display: flex;
+    height: 30px;
+    line-height: 30px;
 }
 .vue-range > * {
-  display: flex;
-  display: -webkit-box;
+    display: -webkit-box;
+    display: flex;
 }
 .vue-range *[slot=start] {
   margin-right: 5px;
@@ -167,7 +175,7 @@ export default {
   flex: 1;
   margin-right: 30px;
 }
-.vue-range .vue-range-runway {
+.vue-range .vue-range-railway {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -176,7 +184,15 @@ export default {
   border-top-color: #a9acb1;
   border-top-style: solid;
 }
-.vue-range .vue-range-thumb {
+.vue-range .vue-range-bar {
+  display: block;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0;
+  background-color: #14df24;
+}
+.vue-range .vue-range-handle {
   background-color: #fff;
   position: absolute;
   left: 0;
@@ -187,12 +203,4 @@ export default {
   cursor: move;
   box-shadow: 0 1px 3px rgba(0,0,0,.4);
 }
-.vue-range .vue-range-progress {
-  position: absolute;
-  display: block;
-  background-color: #14df24;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 0;
-}
-</style>
+</style>