├── .gitattributes
├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js
├── debug.log
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── ruler.gif
└── src
    ├── App.vue
    ├── assets
        └── logo.png
    ├── components
        └── DLRuler.vue
    ├── main.js
    ├── router.js
    └── store.js


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 tangzhichao
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-ruler
 2 | > 基于vue 2.x的 刻度尺，只支持移动端
 3 | ## 实例代码：
 4 | ```
 5 |     体重
 6 |     <DLRuler :value="50" :min="30" :max="300" :onChange="changeWeight"></DLRuler>
 7 |     身高
 8 |     <DLRuler :value="60" :min="10" :max="100"></DLRuler>
 9 |     测试
10 |     <DLRuler :value="35" :min="10" :max="120"></DLRuler>
11 | ```    
12 | 参数描述：
13 | 
14 | value 当前值
15 | 
16 | min 最小值
17 | 
18 | max 最大值
19 | 
20 | onChange：数值发生改变后调用， 可选参数
21 | 
22 | ## 效果：
23 | ![image](https://github.com/alvin198761/vue-ruler/blob/master/ruler.gif)
24 | ## 问题：
25 | 最小刻度还有bug,
26 | 
27 | ## Project setup
28 | ```
29 | npm install
30 | ```
31 | 
32 | ### Compiles and hot-reloads for development
33 | ```
34 | npm run start
35 | ```
36 | 
37 | ### Compiles and minifies for production
38 | ```
39 | npm run build
40 | ```
41 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/debug.log:
--------------------------------------------------------------------------------
1 | [1129/122853.491:ERROR:crash_report_database_win.cc(428)] unexpected header
2 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-ruler",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "start": "vue-cli-service serve  --open",
 7 |     "build": "vue-cli-service build"
 8 |   },
 9 |   "dependencies": {
10 |     "vue": "^2.5.17",
11 |     "vue-router": "^3.0.1",
12 |     "vuex": "^3.0.1",
13 |     "vue-plugin-touch": "^0.1.1"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "^3.2.0",
17 |     "@vue/cli-service": "^3.2.0",
18 |     "less": "^3.0.4",
19 |     "less-loader": "^4.1.0",
20 |     "vue-template-compiler": "^2.5.17"
21 |   },
22 |   "postcss": {
23 |     "plugins": {
24 |       "autoprefixer": {}
25 |     }
26 |   },
27 |   "browserslist": [
28 |     "> 1%",
29 |     "last 2 versions",
30 |     "not ie <= 8"
31 |   ]
32 | }
33 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alvin198761/vue-ruler/d908722cb70c9f0f4324aa9874ec55511585b811/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-ruler</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-ruler doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/ruler.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alvin198761/vue-ruler/d908722cb70c9f0f4324aa9874ec55511585b811/ruler.gif


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>仅限于移动端</h1>
 4 |     体重
 5 |     <DLRuler :value="50" :min="30" :max="300" :onChange="changeWeight"></DLRuler>
 6 |     身高
 7 |     <DLRuler :value="60" :min="10" :max="100"></DLRuler>
 8 |     测试
 9 |     <DLRuler :value="35" :min="10" :max="120"></DLRuler>
10 |   </div>
11 | 
12 | </template>
13 | <script>
14 |     import DLRuler from './components/DLRuler.vue';
15 | 
16 |     export default {
17 |         components: {DLRuler},
18 |         data: function () {
19 |             return {}
20 |         },
21 |         computed: {},
22 |         created: function () {
23 | 
24 |         },
25 |         methods: {
26 |             changeWeight(val) {
27 |                 console.log(val);
28 |             }
29 |         }
30 |     }
31 | </script>
32 | <style>
33 | 
34 | </style>
35 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alvin198761/vue-ruler/d908722cb70c9f0f4324aa9874ec55511585b811/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/DLRuler.vue:
--------------------------------------------------------------------------------
  1 | <template xmlns:v-touch="http://www.w3.org/1999/xhtml">
  2 |   <div>
  3 |     <div style="text-align: center;color: #FF5E3A;margin-top: 11px;margin-bottom: 24px;font-size: 16px">{{numberValue}}.0</div>
  4 |     <div class="ruler " ref="testAA" style="border: 1px solid #B5C0CD;">
  5 |       <div class="main"
  6 |            :style="{'-webkit-transform': 'translateX(' +  mainValue + 'px)', 'width': getMainWidth+'px', position: 'relative',  left: '0px'}">
  7 |         <ul style="overflow: hidden;  -webkit-transform: translateX(45px);">
  8 |           <li v-touch:touchstart="onTouchStart" v-touch:touchmove="onTouchMove" v-touch:touchend="onTouchEnd"
  9 |               v-touch:touchcancel="onTouchEnd" v-for="(n,index) in itemCount" :key="n"><span class="num">{{min  + index * 5 }} </span>
 10 |           </li>
 11 |         </ul>
 12 |       </div>
 13 |       <div class="arrow"></div>
 14 |     </div>
 15 |   </div>
 16 | 
 17 | </template>
 18 | <script>
 19 | 
 20 |   export default {
 21 |     props: ["value", "min", "max", "onChange"],
 22 |     components: {},
 23 |     data: function () {
 24 |       return {
 25 |         mainValue: 0,
 26 |         end: 0,
 27 |         numberValue: this.value,
 28 |         start: 0,
 29 |         startX: 0,
 30 |         moveX: 0,
 31 |         X: 0,
 32 |         gap: this.value - this.min
 33 |       }
 34 |     },
 35 |     computed: {
 36 |       itemCount() {
 37 |         const num = this.max - this.min;
 38 |         let value = num / 5;
 39 |         return value + 1;
 40 |       },
 41 |       getMainWidth() {
 42 |         return ((this.max - this.min) / 5 + 2) * 104
 43 |       }
 44 |     },
 45 |     created() {
 46 | 
 47 |     },
 48 |     mounted() {
 49 |       this.calcInit(this.value);
 50 |     },
 51 |     methods: {
 52 | 
 53 |       calcInit(value) {
 54 |         let startValue = this.min - 5;
 55 |         let width = this.$refs.testAA.offsetWidth;
 56 | 
 57 |         let centerPX = width / 2 - 40;
 58 |         let offsetKe = centerPX / 104;
 59 |         while (offsetKe > 0) {
 60 |           if (offsetKe < 1) {
 61 |             startValue += offsetKe * 5;
 62 |           } else {
 63 |             startValue += 5
 64 |           }
 65 |           offsetKe--;
 66 |         }
 67 | 
 68 |         let offsetPx = ( value - startValue) / 5;
 69 |         offsetPx = offsetPx * 105 - offsetPx;
 70 |         this.mainValue = -offsetPx;
 71 |       },
 72 |       onTouchStart(e) {
 73 |         const that = this;
 74 |         e.stopPropagation();
 75 |         that.start = 0;
 76 |         that.end = -((this.max - this.min) * 20.8);
 77 |         that.startX = e.changedTouches[0].pageX - that.mainValue;
 78 |       },
 79 |       onTouchMove(e) {
 80 |         e.preventDefault();
 81 |         const that = this;
 82 |         that.moveX = e.changedTouches[0].pageX;
 83 |         that.X = that.moveX - that.startX;
 84 | 
 85 |         if (that.X > 0) {
 86 |           var vv = that.mainValue;
 87 |           if (vv >= that.start) {
 88 |             that.start = that.X > that.start ? that.start : that.X;
 89 |             that.mainValue = that.start;
 90 |           } else {
 91 |             that.mainValue = that.X;
 92 |           }
 93 |         } else {
 94 |           var vv = that.mainValue;
 95 |           if (vv <= that.end) {
 96 |             that.end = that.X < that.end ? that.end : that.X;
 97 |             that.mainValue = that.end;
 98 |           } else {
 99 |             that.mainValue = that.X;
100 |           }
101 |         }
102 | 
103 |         let width = this.$refs.testAA.offsetWidth;
104 |         let startValue = this.min - 5;
105 |         let centerValue = startValue;
106 | 
107 |         let centerPX = width / 2 - 40;
108 |         let offsetKe = centerPX / 104;
109 |         while (offsetKe > 0) {
110 |           if (offsetKe < 1) {
111 |             centerValue += offsetKe * 5;
112 |           } else {
113 |             centerValue += 5
114 |           }
115 |           offsetKe--;
116 |         }
117 |         let a = Math.abs(that.mainValue) / 20.8;
118 |         that.numberValue = Math.round(centerValue + a);
119 |         if(that.numberValue >= that.max){
120 |           that.numberValue = that.max;
121 |           that.calcInit(that.max);
122 |           return ;
123 |         }
124 |         if(that.numberValue <= that.min){
125 |           that.numberValue = that.min;
126 |           that.calcInit(that.min);
127 |           return ;
128 |         }
129 |       },
130 |       onTouchEnd(var1, var2) {
131 |         this.onChange && this.onChange(this.numberValue);
132 |         this.calcInit( this.numberValue);
133 |       }
134 |     }
135 |   }
136 | </script>
137 | <style>
138 |   ul,li {
139 |     list-style: none;
140 |     padding: 0;
141 |   }
142 |   .ruler {
143 |     height: 90px;
144 |     overflow: hidden;
145 |     position: relative;
146 |     width: 100%;
147 |     margin-left: auto;
148 |     margin-right: auto;
149 |     background-color: #F8FAFF;
150 |   }
151 | 
152 |   .ruler li {
153 |     float: left;
154 |     width: 104px;
155 |     height: 60px;
156 |     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAL8AAAAxCAYAAACLUHiuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpENzkxQzI5Q0VDQjExMUU4QTRDNDhDRDFEQjY1RjE4MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpENzkxQzI5REVDQjExMUU4QTRDNDhDRDFEQjY1RjE4MCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQ3OTFDMjlBRUNCMTExRThBNEM0OENEMURCNjVGMTgwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQ3OTFDMjlCRUNCMTExRThBNEM0OENEMURCNjVGMTgwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Rxi/xQAAAK9JREFUeNrs3LEJgDAURdEfyUQuYO++WusAupKC4gCGIEjOGeAV8RKskqZlO+KWoh6bNj/ZHIf+9eC87tdmF9Ao8SN+ED+IH8QP4gfxg/hB/CB+ED+IH8QP4gfxg/hB/CB+ED+IH8QP4gfxQ4EcdR8YerS8Gc7zH9/IzY/fHhA/iB/ED+IH8YP4QfwgfviL7AiqS47AzQ/iB/GD+EH8IH4QP4gfxA/iB/GD+KHcKcAAOSwPsO1PsqYAAAAASUVORK5CYII=) left top no-repeat;
157 |     background-size: 94px;
158 |     padding-top: 30px;
159 |     text-align: right;
160 |     padding-left: 0;
161 |   }
162 | 
163 |   .ruler li .num {
164 |     display: inline-block;
165 |     position: relative;
166 |     margin-right: -6px;
167 |   }
168 | 
169 |   .ruler .arrow {
170 |     width: 0;
171 |     height: 0;
172 |     border: 8px solid transparent;
173 |     border-top: 8px solid #ffa657;
174 |     position: absolute;
175 |     left: 50%;
176 |     top: 0;
177 |     margin-left: -8px;
178 |   }
179 | 
180 |   .main li {
181 |     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANMAAAAxCAYAAABAi5xQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpERDMwOEQ3MEVDQjExMUU4OEVFMDk2RDM3RkE1OEMyRCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpERDMwOEQ3MUVDQjExMUU4OEVFMDk2RDM3RkE1OEMyRCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkREMzA4RDZFRUNCMTExRTg4RUUwOTZEMzdGQTU4QzJEIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkREMzA4RDZGRUNCMTExRTg4RUUwOTZEMzdGQTU4QzJEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+sPzlxgAAAOlJREFUeNrs3DEKwjAUgOFEciIv4Obgfeusm4texgNUsBTcJNAX0/p9c3mEF35aF/NwuY9pktN3W362Rg9zPdvBvZ0O+3S+Pt5zd4nPRY8rmktn9yYmWIiYQEwgJhATICYQE4gJxASICcQEYgLEBGICMYGYADGBmEBMICZATPB7JS3/d0ozc839q7neTOAzD8QEYgLEBGKCtSiVzz+DzmFuLPttcG+1MR2DzmFuLPttcG+1Md2CzmFuLPttcG9+M4GYQEywScUKupKtwJsJxGQFICYQE4gJEBOICcQEYgLEBGICMQGTlwADAJ6bLbi/IMcnAAAAAElFTkSuQmCC) left top no-repeat;
182 |     background-size: 100px auto;
183 |     color: #b5d0e1;
184 |   }
185 | 
186 | 
187 | </style>
188 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | import vueTouch from 'vue-plugin-touch';
 6 | Vue.use(vueTouch);
 7 | Vue.config.productionTip = false
 8 | 
 9 | new Vue({
10 |   router,
11 |   store,
12 |   render: h => h(App)
13 | }).$mount('#app')
14 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | 
 4 | Vue.use(Router)
 5 | 
 6 | export default new Router({
 7 |   routes: [
 8 | 
 9 |   ]
10 | })
11 | 


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {
 8 | 
 9 |   },
10 |   mutations: {
11 | 
12 |   },
13 |   actions: {
14 | 
15 |   }
16 | })
17 | 


--------------------------------------------------------------------------------