├── .DS_Store ├── .babelrc ├── .gitignore ├── .prettierrc ├── App.vue ├── README.md ├── app ├── index.js ├── scale-h1.png ├── scale-h2.png ├── scale-v1.png ├── scale-v2.png └── styles.less ├── build ├── webpack.base.config.js ├── webpack.demo.config.js ├── webpack.dev.config.js └── webpack.prod.config.js ├── component ├── 8732e452c9f76f287f35a4ff038c0419.png ├── ef356f706a20cd6caab79533f42f4bdf.png └── index.js ├── demo ├── 8732e452c9f76f287f35a4ff038c0419.png ├── ef356f706a20cd6caab79533f42f4bdf.png ├── index.html └── index.js ├── index.html ├── index.js ├── main.js └── package.json /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuclown/vue-scale/460ae2316ded87415d8cbb73665ad1d9ce9dd19a/.DS_Store -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"], 3 | "plugins": ["transform-vue-jsx"] 4 | } 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 4, 3 | "useTabs": false, 4 | "semi": false, 5 | "TrailingCooma": "all", 6 | "bracketSpacing": true, 7 | "jsxBracketSameLine": false, 8 | "arrowParens": "avoid" 9 | } 10 | -------------------------------------------------------------------------------- /App.vue: -------------------------------------------------------------------------------- 1 | 8 | 13 | 27 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-scale 2 | 3 | 这是一个基于 better-scroll 滑动刻度尺,他支持水平,垂直滑动。 4 | 5 | `npm i vue-scale -S` 6 | 7 | 列一 8 | ``` 9 | import VueScale from "vue-scale" 10 | 11 | data{ 12 | return { 13 | value: 60 14 | } 15 | } 16 | ``` 17 | 18 | 列二 19 | ``` 20 | import VueScale from "vue-scale" 21 | 22 | data{ 23 | return { 24 | value: 60 25 | } 26 | } 27 | methods: { 28 | format(e) { 29 | return `${e}cm` 30 | } 31 | } 32 | ``` 33 | 34 | ### 演示 35 | 36 | [暂无 demo 显示》》]("") 37 | 38 | ### API 39 | 40 | | 参数 | 说明 | 类型 | 默认值 | 版本 | 41 | | ------------ | ----------------------------------------- | ----------------- | ----------------------- | ---- | 42 | | v-model | 初始化滑动位置(实时监听滑动 val) | Number | 0 | - | 43 | | type | 刻度尺类型 horizontal/verticality | String | horizontal | - | 44 | | max | 刻度尺最大刻度 | Number | 100 | - | 45 | | min | 刻度尺最小刻度 | Number | 0 | - | 46 | | ratio | 刻度尺刻度比例 | Number | 1 | - | 47 | | interval | 刻度尺刻度与刻度间隔 | Number | 8 | - | 48 | | group | 刻度尺刻度组 | Number | 10 | - | 49 | | flipVertical | 刻度尺刻水平/垂直翻转(与刻度尺类型关联) | Boolean | false | - | 50 | | mask | 刻度尺刻遮罩 (与刻度尺类型关联) | Boolean | true | - | 51 | | format | 刻度尺数字格式化 | Function(e) | - | - | 52 | 53 | ### EVENT 54 | | 参数 | 说明 | 类型 | 默认值 | 版本 | 55 | | ------------ | ----------------------------------------- | ----------------- | ----------------------- | ---- | 56 | | scroll | 当前滑动中回调 | Function(value,e) | - | - | 57 | | scrollEnd | 当前滑动停止 | Function(value,e) | - | - | 58 | 59 | > 说明: 60 | > 1、刻度尺组件 type="verticality",请设置高度,默认 100%。 61 | > 2、不提供任何 css props,然和样式你都可以修改,包括(背景图片)。 62 | > 3、刻度尺的刻度是背景图片,你可以设置的自己背景图片结合 group 来修改成你想要的。 63 | -------------------------------------------------------------------------------- /app/index.js: -------------------------------------------------------------------------------- 1 | import BScroll from "@better-scroll/core" 2 | import "./styles.less" 3 | export default { 4 | name: "vue-scale-swiper", 5 | props: { 6 | // horizontal/verticality 7 | type: { 8 | type: String, 9 | default: "horizontal" 10 | }, 11 | // 当前刻度value 12 | value: { 13 | type: Number, 14 | default: 0 15 | }, 16 | // 最大数 17 | max: { 18 | type: Number, 19 | default: 100 20 | }, 21 | // 最小数 22 | min: { 23 | type: Number, 24 | default: 0 25 | }, 26 | // 刻度比例(1:1) 27 | ratio: { 28 | type: Number, 29 | default: 1 30 | }, 31 | // 刻度与刻度之间的距离 32 | interval: { 33 | type: Number, 34 | default: 8 35 | }, 36 | // 刻度组合,多少刻度为一组 37 | group: { 38 | type: Number, 39 | default: 10 40 | }, 41 | // 垂直翻转 42 | flipVertical: Boolean, 43 | // 遮罩 44 | mask: { 45 | type: Boolean, 46 | default: false 47 | }, 48 | // 刻度数格式 49 | format: { 50 | type: Function, 51 | default: e => e 52 | } 53 | }, 54 | data() { 55 | return { 56 | list: [], 57 | scaleSize: 0, 58 | preventDefault: false, 59 | direction: true 60 | } 61 | }, 62 | created() { 63 | this.direction = this.type === "horizontal" 64 | this.scaleList() 65 | }, 66 | mounted() { 67 | const width = this.$refs.scale.clientWidth 68 | const height = this.$refs.scale.clientHeight 69 | this.scaleSize = this.direction ? width : height 70 | this.$nextTick(() => { 71 | const x = this.calcScrollX(this.value) 72 | const scrollX = this.direction ? true : false 73 | const scrollY = this.direction ? false : true 74 | const startX = this.direction ? x : 0 75 | const startY = this.direction ? 0 : x 76 | const preventDefault = this.direction ? false : true 77 | this.bs = new BScroll(this.$refs.scroll, { 78 | scrollX, 79 | scrollY, 80 | startX, 81 | startY, 82 | preventDefault, 83 | probeType: 3 84 | }) 85 | this.bs.on("scroll", e => this.scroll(e)) 86 | this.bs.on("scrollEnd", e => this.scrollEnd(e)) 87 | this.bs.on("scrollStart", e => (this.preventDefault = true)) 88 | this.bs.on("touchEnd", e => (this.preventDefault = false)) 89 | }) 90 | document.addEventListener( 91 | "touchmove", 92 | event => { 93 | this.preventDefault ? event.preventDefault() : null 94 | }, 95 | { passive: false } 96 | ) 97 | }, 98 | methods: { 99 | scroll(e) { 100 | const value = this.calcValue(e) 101 | this.$emit("input", value) 102 | this.$emit("scroll", { value, e }) 103 | }, 104 | scrollEnd(e) { 105 | const position = e.x / this.interval 106 | const value = this.calcValue(e) 107 | const x = this.direction ? this.calcScrollX(value) : 0 108 | const y = this.direction ? 0 : this.calcScrollX(value) 109 | this.bs.scrollTo(x, y, 300) 110 | if (Number.isInteger(position)) 111 | this.$emit("scrollEnd", { value, e }) 112 | }, 113 | calcScrollX(val) { 114 | const value = val - this.min 115 | const x = (value * this.interval) / this.ratio 116 | return -x 117 | }, 118 | calcValue({ x, y }) { 119 | const xy = this.direction ? x : y 120 | const round = Math.round(xy / this.interval) 121 | const value = Math.abs(round * this.ratio) + this.min 122 | const num = Number(this.limbNumber(value)) 123 | return num 124 | }, 125 | limbNumber(num) { 126 | return Number.isInteger(num) ? parseInt(num) : num.toFixed(1) 127 | }, 128 | scaleList() { 129 | const liWidth = this.interval * this.group 130 | const widthGroup = this.group * this.interval 131 | const max = this.max / this.ratio / this.group 132 | const min = this.min / this.ratio / this.group 133 | const bsx = liWidth - this.interval + 1 134 | const bsy = (liWidth - this.interval + 1) / 2 135 | const x = this.direction ? bsx : bsy 136 | const y = this.direction ? bsy : bsx 137 | let list = [] 138 | for (let i = min; i <= max; i++) { 139 | const value = i * this.ratio * this.group 140 | const ifs = i === min 141 | const width = ifs ? `${this.interval}px` : `${widthGroup}px` 142 | const height = ifs ? `${this.interval}px` : `${widthGroup}px` 143 | const leftX = ifs ? -liWidth / 2 : liWidth / 2 - this.interval 144 | const flipVertical = this.direction ? "rotateX" : "rotateY" 145 | const item = ( 146 |
  • 155 | 171 | {this.format(this.limbNumber(value))} 172 | 173 |
  • 174 | ) 175 | list.push(item) 176 | } 177 | this.list = list 178 | } 179 | }, 180 | render() { 181 | const lineX = this.scaleSize / 2 182 | const placeholder = lineX > 0 ? lineX : 0 183 | const value = (this.max - this.min) / this.ratio 184 | const width = value * this.interval + placeholder * 2 185 | const height = value * this.interval + placeholder * 2 186 | const flipVertical = this.direction 187 | ? "rotateX(180deg)" 188 | : "rotateY(180deg)" 189 | const placeholderLi = ( 190 |
  • 201 | ) 202 | return ( 203 |
    214 | {this.value} 215 | {this.$slots.standard ? ( 216 | this.$slots.standard 217 | ) : ( 218 |
    219 | 227 |
    228 | )} 229 |
    230 |
      237 | {placeholderLi} 238 | {this.list} 239 | {placeholderLi} 240 |
    241 |
    242 |
    243 | ) 244 | } 245 | } 246 | -------------------------------------------------------------------------------- /app/scale-h1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuclown/vue-scale/460ae2316ded87415d8cbb73665ad1d9ce9dd19a/app/scale-h1.png -------------------------------------------------------------------------------- /app/scale-h2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuclown/vue-scale/460ae2316ded87415d8cbb73665ad1d9ce9dd19a/app/scale-h2.png -------------------------------------------------------------------------------- /app/scale-v1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuclown/vue-scale/460ae2316ded87415d8cbb73665ad1d9ce9dd19a/app/scale-v1.png -------------------------------------------------------------------------------- /app/scale-v2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuclown/vue-scale/460ae2316ded87415d8cbb73665ad1d9ce9dd19a/app/scale-v2.png -------------------------------------------------------------------------------- /app/styles.less: -------------------------------------------------------------------------------- 1 | .mask { 2 | content: ""; 3 | position: absolute; 4 | top: 0px; 5 | height: inherit; 6 | width: 50%; 7 | z-index: 99; 8 | pointer-events: none; 9 | } 10 | .clown-scale { 11 | position: relative; 12 | background-color: #ffffff; 13 | &.horizontal { 14 | width: 100%; 15 | height: 60px; 16 | } 17 | &.verticality { 18 | height: 100%; 19 | width: 60px; 20 | } 21 | &.clown-scale-mask { 22 | &::before { 23 | .mask; 24 | left: 0px; 25 | background-image: linear-gradient( 26 | to right, 27 | white, 28 | rgba(255, 255, 255, 0) 29 | ); 30 | } 31 | &::after { 32 | .mask; 33 | right: 0px; 34 | background-image: linear-gradient( 35 | to right, 36 | rgba(255, 255, 255, 0), 37 | white 38 | ); 39 | } 40 | } 41 | > .standard { 42 | position: relative; 43 | > .standard-line { 44 | position: absolute; 45 | left: 0px; 46 | top: -1px; 47 | display: block; 48 | margin-left: -6px; 49 | z-index: 99; 50 | border-top: 6px #ff9901 dashed; 51 | border-left: 6px transparent dashed; 52 | border-bottom: 6px transparent dashed; 53 | border-right: 6px transparent solid; 54 | } 55 | } 56 | > .clown-scale-swiper { 57 | position: relative; 58 | width: 100%; 59 | overflow: hidden; 60 | height: inherit; 61 | z-index: 1; 62 | > .swiper { 63 | height: inherit; 64 | background-color: none; 65 | transition-timing-function: cubic-bezier(0, 0.3, 0.8, 1); 66 | margin: 0px; 67 | padding: 0px; 68 | > .placeholder { 69 | display: inline-block; 70 | height: inherit; 71 | } 72 | > .limb { 73 | display: inline-block; 74 | height: inherit; 75 | background-image: url(./scale-h2.png); 76 | background-repeat: no-repeat; 77 | position: relative; 78 | > .limb-number { 79 | position: absolute; 80 | bottom: 0px; 81 | font-style: normal; 82 | text-align: center; 83 | &.rotateX { 84 | transform: rotateX(180deg); 85 | } 86 | } 87 | } 88 | > .first-li { 89 | background-image: url(./scale-h1.png); 90 | } 91 | } 92 | } 93 | &.verticality { 94 | &.clown-scale-mask { 95 | &::before { 96 | .mask; 97 | top: 0px; 98 | width: 100%; 99 | height: 50%; 100 | background-image: linear-gradient( 101 | to bottom, 102 | white, 103 | rgba(255, 255, 255, 0) 104 | ); 105 | } 106 | &::after { 107 | .mask; 108 | bottom: 0px; 109 | width: 100%; 110 | height: 50%; 111 | top: auto; 112 | background-image: linear-gradient( 113 | to top, 114 | white, 115 | rgba(255, 255, 255, 0) 116 | ); 117 | } 118 | } 119 | > .standard { 120 | > .standard-line { 121 | margin-left: 0px; 122 | border-top: 6px transparent dashed; 123 | border-left: 6px #ff9901 dashed; 124 | } 125 | } 126 | > .clown-scale-swiper { 127 | > .swiper { 128 | > .limb { 129 | background-image: url(./scale-v2.png); 130 | background-position: top left; 131 | display: block; 132 | > .limb-number { 133 | text-align: right; 134 | bottom: auto; 135 | right: 0px; 136 | display: flex; 137 | align-items: center; 138 | &.rotateY { 139 | transform: rotateY(180deg); 140 | text-align: left; 141 | } 142 | } 143 | } 144 | > .first-li { 145 | background-image: url(./scale-v1.png); 146 | background-position: top left; 147 | > .limb-number { 148 | top: -12px !important; 149 | align-items: flex-start; 150 | } 151 | } 152 | } 153 | } 154 | } 155 | } 156 | -------------------------------------------------------------------------------- /build/webpack.base.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path") 2 | const { VueLoaderPlugin } = require("vue-loader") 3 | 4 | module.exports = { 5 | output: { 6 | path: path.resolve("component") 7 | }, 8 | module: { 9 | rules: [ 10 | { 11 | test: /\.css$/, 12 | exclude: /node_modules/, 13 | use: ["style-loader", "css-loader"] 14 | }, 15 | { 16 | test: /\.less$/, 17 | loader: ["style-loader", "css-loader", "less-loader"] 18 | }, 19 | { 20 | test: /\.vue$/, 21 | exclude: /node_modules/, 22 | loader: "vue-loader" 23 | }, 24 | { 25 | test: /\.(js|jsx)$/, 26 | exclude: /node_modules/, 27 | loader: "babel-loader" 28 | }, 29 | { 30 | test: /\.(png|jpg|gif)$/i, 31 | exclude: /node_modules/, 32 | use: [ 33 | { 34 | loader: "url-loader", 35 | options: { 36 | limit: 5000 37 | } 38 | } 39 | ] 40 | } 41 | ] 42 | }, 43 | resolve: { 44 | extensions: [".js", ".jsx", ".vue", ".less", ".json"] 45 | }, 46 | plugins: [new VueLoaderPlugin()] 47 | } 48 | -------------------------------------------------------------------------------- /build/webpack.demo.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path") 2 | const merge = require("webpack-merge") 3 | const HtmlWebpackPlugin = require("html-webpack-plugin") 4 | const { CleanWebpackPlugin } = require("clean-webpack-plugin") 5 | const baseWebpackConfig = require("./webpack.base.config") 6 | 7 | module.exports = module.exports = merge(baseWebpackConfig, { 8 | entry: path.resolve("index.js"), 9 | output: { 10 | path: path.resolve("demo"), 11 | filename: "index.js", 12 | libraryTarget: "umd", 13 | umdNamedDefine: true 14 | }, 15 | plugins: [ 16 | new CleanWebpackPlugin(), 17 | new HtmlWebpackPlugin({ 18 | template: path.resolve("index.html") 19 | }) 20 | ] 21 | }) 22 | -------------------------------------------------------------------------------- /build/webpack.dev.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path") 2 | const webpack = require("webpack") 3 | const merge = require("webpack-merge") 4 | const HtmlWebpackPlugin = require("html-webpack-plugin") 5 | const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin") 6 | const baseWebpackConfig = require("./webpack.base.config") 7 | 8 | const port = 8888 9 | const host = "0.0.0.0" 10 | module.exports = merge(baseWebpackConfig, { 11 | entry: path.resolve("index.js"), 12 | output: { 13 | filename: "[hash].app.js" 14 | }, 15 | devServer: { 16 | port, 17 | host, 18 | clientLogLevel: "none", 19 | contentBase: path.resolve("component"), 20 | hot: true, 21 | quiet: true, 22 | overlay: { 23 | errors: true 24 | } 25 | }, 26 | plugins: [ 27 | new webpack.HotModuleReplacementPlugin(), 28 | new HtmlWebpackPlugin({ 29 | template: path.resolve("index.html") 30 | }), 31 | new FriendlyErrorsPlugin({ 32 | compilationSuccessInfo: { 33 | messages: [ 34 | `You application is running here http://${host}:${port}` 35 | ] 36 | } 37 | }) 38 | ] 39 | }) 40 | -------------------------------------------------------------------------------- /build/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path") 2 | const merge = require("webpack-merge") 3 | const baseWebpackConfig = require("./webpack.base.config") 4 | const { CleanWebpackPlugin } = require("clean-webpack-plugin") 5 | 6 | module.exports = module.exports = merge(baseWebpackConfig, { 7 | entry: path.resolve("main.js"), 8 | output: { 9 | filename: "index.js", 10 | libraryTarget: "umd", 11 | umdNamedDefine: true 12 | }, 13 | plugins: [new CleanWebpackPlugin()] 14 | }) 15 | -------------------------------------------------------------------------------- /component/8732e452c9f76f287f35a4ff038c0419.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuclown/vue-scale/460ae2316ded87415d8cbb73665ad1d9ce9dd19a/component/8732e452c9f76f287f35a4ff038c0419.png -------------------------------------------------------------------------------- /component/ef356f706a20cd6caab79533f42f4bdf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuclown/vue-scale/460ae2316ded87415d8cbb73665ad1d9ce9dd19a/component/ef356f706a20cd6caab79533f42f4bdf.png -------------------------------------------------------------------------------- /component/index.js: -------------------------------------------------------------------------------- 1 | !function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var i=e();for(var o in i)("object"==typeof exports?exports:t)[o]=i[o]}}(window,(function(){return function(t){var e={};function i(o){if(e[o])return e[o].exports;var n=e[o]={i:o,l:!1,exports:{}};return t[o].call(n.exports,n,n.exports,i),n.l=!0,n.exports}return i.m=t,i.c=e,i.d=function(t,e,o){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(i.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)i.d(o,n,function(e){return t[e]}.bind(null,n));return o},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=9)}([function(t,e,i){var o=i(1);"string"==typeof o&&(o=[[t.i,o,""]]);var n={insert:"head",singleton:!1};i(8)(o,n);o.locals&&(t.exports=o.locals)},function(t,e,i){e=t.exports=i(2)(!1);var o=i(3),n=o(i(4)),r=o(i(5)),s=o(i(6)),a=o(i(7));e.push([t.i,'.mask {\n content: "";\n position: absolute;\n top: 0px;\n height: inherit;\n width: 50%;\n z-index: 99;\n pointer-events: none;\n}\n.clown-scale {\n position: relative;\n background-color: #ffffff;\n}\n.clown-scale.clown-scale-mask::before {\n content: "";\n position: absolute;\n top: 0px;\n height: inherit;\n width: 50%;\n z-index: 99;\n pointer-events: none;\n left: 0px;\n background-image: linear-gradient(to right, white, rgba(255, 255, 255, 0));\n}\n.clown-scale.clown-scale-mask::after {\n content: "";\n position: absolute;\n top: 0px;\n height: inherit;\n width: 50%;\n z-index: 99;\n pointer-events: none;\n right: 0px;\n background-image: linear-gradient(to right, rgba(255, 255, 255, 0), white);\n}\n.clown-scale > .standard {\n position: relative;\n}\n.clown-scale > .standard > .standard-line {\n position: absolute;\n left: 0px;\n top: -1px;\n display: block;\n margin-left: -6px;\n z-index: 99;\n border-top: 6px #ff9901 dashed;\n border-left: 6px transparent dashed;\n border-bottom: 6px transparent dashed;\n border-right: 6px transparent solid;\n}\n.clown-scale > .clown-scale-swiper {\n position: relative;\n width: 100%;\n overflow: hidden;\n height: inherit;\n z-index: 1;\n}\n.clown-scale > .clown-scale-swiper > .swiper {\n height: inherit;\n background-color: none;\n transition-timing-function: cubic-bezier(0, 0.3, 0.8, 1);\n margin: 0px;\n padding: 0px;\n}\n.clown-scale > .clown-scale-swiper > .swiper > .placeholder {\n display: inline-block;\n height: inherit;\n}\n.clown-scale > .clown-scale-swiper > .swiper > .limb {\n display: inline-block;\n height: inherit;\n background-image: url('+n+");\n background-repeat: no-repeat;\n position: relative;\n}\n.clown-scale > .clown-scale-swiper > .swiper > .limb > .limb-number {\n position: absolute;\n bottom: 0px;\n font-style: normal;\n width: 100%;\n text-align: center;\n}\n.clown-scale > .clown-scale-swiper > .swiper > .limb > .limb-number.rotateX {\n transform: rotateX(180deg);\n}\n.clown-scale > .clown-scale-swiper > .swiper > .first-li {\n background-image: url("+r+');\n}\n.clown-scale.verticality.clown-scale-mask::before {\n content: "";\n position: absolute;\n height: inherit;\n width: 50%;\n z-index: 99;\n pointer-events: none;\n top: 0px;\n width: 100%;\n height: 50%;\n background-image: linear-gradient(to bottom, white, rgba(255, 255, 255, 0));\n}\n.clown-scale.verticality.clown-scale-mask::after {\n content: "";\n position: absolute;\n top: 0px;\n height: inherit;\n width: 50%;\n z-index: 99;\n pointer-events: none;\n bottom: 0px;\n width: 100%;\n height: 50%;\n top: auto;\n background-image: linear-gradient(to top, white, rgba(255, 255, 255, 0));\n}\n.clown-scale.verticality > .standard > .standard-line {\n margin-left: 0px;\n border-top: 6px transparent dashed;\n border-left: 6px #ff9901 dashed;\n}\n.clown-scale.verticality > .clown-scale-swiper > .swiper > .limb {\n background-image: url('+s+");\n background-position: top left;\n display: block;\n}\n.clown-scale.verticality > .clown-scale-swiper > .swiper > .limb > .limb-number {\n text-align: right;\n bottom: auto;\n}\n.clown-scale.verticality > .clown-scale-swiper > .swiper > .limb > .limb-number.rotateY {\n transform: rotateY(180deg);\n text-align: left;\n}\n.clown-scale.verticality > .clown-scale-swiper > .swiper > .first-li {\n background-image: url("+a+");\n background-position: top left;\n}\n.clown-scale.verticality > .clown-scale-swiper > .swiper > .first-li > .limb-number {\n top: -12px !important;\n}\n",""])},function(t,e,i){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var i=function(t,e){var i=t[1]||"",o=t[3];if(!o)return i;if(e&&"function"==typeof btoa){var n=(s=o,a=btoa(unescape(encodeURIComponent(JSON.stringify(s)))),c="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(a),"/*# ".concat(c," */")),r=o.sources.map((function(t){return"/*# sourceURL=".concat(o.sourceRoot).concat(t," */")}));return[i].concat(r).concat([n]).join("\n")}var s,a,c;return[i].join("\n")}(e,t);return e[2]?"@media ".concat(e[2],"{").concat(i,"}"):i})).join("")},e.i=function(t,i){"string"==typeof t&&(t=[[null,t,""]]);for(var o={},n=0;n0;function u(){return window.performance&&window.performance.now?window.performance.now()+window.performance.timing.navigationStart:+new Date}function p(t){for(var e=[],i=1;idocument.documentElement.clientWidth-this.options.momentumLimitDistance||sdocument.documentElement.clientHeight-this.options.momentumLimitDistance)&&this.end(t)}}},t.prototype.end=function(t){x[t.type]===this.initiated&&(this.setInitiated(),this.beforeHandler(t,"end"),this.hooks.trigger(this.hooks.eventTypes.end,t))},t.prototype.click=function(t){this.hooks.trigger(this.hooks.eventTypes.click,t)},t.prototype.destroy=function(){this.wrapperEventRegister.destroy(),this.targetEventRegister.destroy(),this.hooks.destroy()},t}(),_={x:["translateX","px"],y:["translateY","px"]},$=function(){function t(t){this.content=t,this.style=t.style,this.hooks=new J(["beforeTranslate","translate"])}return t.prototype.getComputedPosition=function(){var t=window.getComputedStyle(this.content,null)[A.transform].split(")")[0].split(", ");return{x:+(t[12]||t[4]),y:+(t[13]||t[5])}},t.prototype.translate=function(t){var e=[];Object.keys(t).forEach((function(i){if(_[i]){var o=_[i][0];if(o){var n=_[i][1],r=t[i];e.push(o+"("+r+n+")")}}})),this.hooks.trigger(this.hooks.eventTypes.beforeTranslate,e,t),this.style[A.transform]=""+e.join(" "),this.hooks.trigger(this.hooks.eventTypes.translate,t)},t.prototype.destroy=function(){this.hooks.destroy()},t}(),q=function(){function t(t,e,i){this.content=t,this.translater=e,this.options=i,this.hooks=new J(["move","end","beforeForceStop","forceStop","time","timeFunction"]),this.style=t.style}return t.prototype.translate=function(t){this.translater.translate(t)},t.prototype.setPending=function(t){this.pending=t},t.prototype.setForceStopped=function(t){this.forceStopped=t},t.prototype.destroy=function(){this.hooks.destroy(),C(this.timer)},t}(),tt=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.startProbe=function(){var t=this,e=function(){var i=t.translater.getComputedPosition();t.hooks.trigger(t.hooks.eventTypes.move,i),t.pending?t.timer=X(e):t.hooks.trigger(t.hooks.eventTypes.end,i)};C(this.timer),this.timer=X(e)},e.prototype.transitionTime=function(t){void 0===t&&(t=0),this.style[A.transitionDuration]=t+"ms",this.hooks.trigger(this.hooks.eventTypes.time,t)},e.prototype.transitionTimingFunction=function(t){this.style[A.transitionTimingFunction]=t,this.hooks.trigger(this.hooks.eventTypes.timeFunction,t)},e.prototype.move=function(t,e,i,o,n){this.setPending(i>0&&(t.x!==e.x||t.y!==e.y)),this.transitionTimingFunction(o),this.transitionTime(i),this.translate(e),i&&this.options.probeType===U.Realtime&&this.startProbe(),i||(this._reflow=this.content.offsetHeight),i||n||(this.hooks.trigger(this.hooks.eventTypes.move,e),this.hooks.trigger(this.hooks.eventTypes.end,e))},e.prototype.stop=function(){if(this.pending){this.setPending(!1),C(this.timer);var t=this.translater.getComputedPosition(),e=t.x,i=t.y;if(this.transitionTime(),this.translate({x:e,y:i}),this.setForceStopped(!0),this.hooks.trigger(this.hooks.eventTypes.beforeForceStop,{x:e,y:i}))return;this.hooks.trigger(this.hooks.eventTypes.forceStop,{x:e,y:i})}},e}(q),et=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.move=function(t,e,i,o,n){if(!i){if(this.translate(e),this._reflow=this.content.offsetHeight,n)return;return this.hooks.trigger(this.hooks.eventTypes.move,e),void this.hooks.trigger(this.hooks.eventTypes.end,e)}this.animate(t,e,i,o)},e.prototype.animate=function(t,e,i,o){var n=this,r=u(),s=r+i,a=function(){var c=u();if(c>=s)return n.translate(e),n.hooks.trigger(n.hooks.eventTypes.move,e),void n.hooks.trigger(n.hooks.eventTypes.end,e);var h=o(c=(c-r)/i),l={};Object.keys(e).forEach((function(i){var o=t[i],n=e[i];l[i]=(n-o)*h+o})),n.translate(l),n.pending&&(n.timer=X(a)),n.options.probeType===U.Realtime&&n.hooks.trigger(n.hooks.eventTypes.move,l)};this.setPending(!0),C(this.timer),a()},e.prototype.stop=function(){if(this.pending){this.setPending(!1),C(this.timer);var t=this.translater.getComputedPosition();if(this.setForceStopped(!0),this.hooks.trigger(this.hooks.eventTypes.beforeForceStop,t))return;this.hooks.trigger(this.hooks.eventTypes.forceStop,t)}},e}(q);var it,ot,nt,rt,st,at=function(){function t(t,e){this.wrapper=t,this.options=e,this.hooks=new J(["momentum","end"]),this.content=this.wrapper.children[0],this.currentPos=0,this.startPos=0}return t.prototype.start=function(){this.direction=O.Default,this.movingDirection=O.Default,this.dist=0},t.prototype.move=function(t){t=this.hasScroll?t:0,this.movingDirection=t>0?O.Negative:t<0?O.Positive:O.Default;var e=this.currentPos+t;return(e>this.minScrollPos||ethis.minScrollPos&&this.options.bounces[0]||ethis.minScrollPos?this.minScrollPos:this.maxScrollPos),e},t.prototype.end=function(t){var e={duration:0},i=Math.abs(this.currentPos-this.startPos);if(this.options.momentum&&tthis.options.momentumLimitDistance){var o=this.direction===O.Negative&&this.options.bounces[0]||this.direction===O.Positive&&this.options.bounces[1]?this.wrapperSize:0;e=this.hasScroll?this.momentum(this.currentPos,this.startPos,t,this.maxScrollPos,this.minScrollPos,o,this.options):{destination:this.currentPos,duration:0}}else this.hooks.trigger(this.hooks.eventTypes.end,e);return e},t.prototype.momentum=function(t,e,i,o,n,r,s){void 0===s&&(s=this.options);var a=t-e,c=Math.abs(a)/i,h=s.deceleration,l=s.swipeBounceTime,u={destination:t+c/h*(a<0?-1:1),duration:s.swipeTime,rate:15};return this.hooks.trigger(this.hooks.eventTypes.momentum,u,a),u.destinationn&&(u.destination=r?Math.min(n+r/4,n+r/u.rate*c):n,u.duration=l),u.destination=Math.round(u.destination),u},t.prototype.updateDirection=function(){var t=Math.round(this.currentPos)-this.absStartPos;this.direction=t>0?O.Negative:t<0?O.Positive:O.Default},t.prototype.refresh=function(){var t=this.options.rect,e=t.size,i=t.position,o="static"===window.getComputedStyle(this.wrapper,null).position,n=D(this.wrapper);this.wrapperSize=n[e];var r=D(this.content);this.contentSize=r[e],this.relativeOffset=r[i],o&&(this.relativeOffset-=n[i]),this.minScrollPos=0,this.maxScrollPos=this.wrapperSize-this.contentSize,this.maxScrollPos<0&&(this.maxScrollPos-=this.relativeOffset,this.minScrollPos=-this.relativeOffset),this.hasScroll=this.options.scrollable&&this.maxScrollPosthis.minScrollPos?e=this.minScrollPos:ee+this.directionLockThreshold?this.directionLocked=Z.Horizontal:e>=t+this.directionLockThreshold?this.directionLocked=Z.Vertical:this.directionLocked=Z.None)},t.prototype.handleEventPassthrough=function(t){var e=ht[this.directionLocked];if(e){if(this.eventPassthrough===e[st.Yes])return ct[st.Yes](t);if(this.eventPassthrough===e[st.No])return ct[st.No](t)}return!1},t}(),ut=function(){function t(t,e,i,o,n){this.hooks=new J(["start","beforeMove","scrollStart","scroll","beforeEnd","end","scrollEnd"]),this.scrollBehaviorX=t,this.scrollBehaviorY=e,this.actionsHandler=i,this.animater=o,this.options=n,this.directionLockAction=new lt(n.directionLockThreshold,n.freeScroll,n.eventPassthrough),this.enabled=!0,this.bindActionsHandler()}return t.prototype.bindActionsHandler=function(){var t=this;this.actionsHandler.hooks.on(this.actionsHandler.hooks.eventTypes.start,(function(e){return!t.enabled||t.handleStart(e)})),this.actionsHandler.hooks.on(this.actionsHandler.hooks.eventTypes.move,(function(e){var i=e.deltaX,o=e.deltaY,n=e.e;return!t.enabled||t.handleMove(i,o,n)})),this.actionsHandler.hooks.on(this.actionsHandler.hooks.eventTypes.end,(function(e){return!t.enabled||t.handleEnd(e)})),this.actionsHandler.hooks.on(this.actionsHandler.hooks.eventTypes.click,(function(e){t.enabled&&!e._constructed&&t.handleClick(e)}))},t.prototype.handleStart=function(t){var e=u();this.moved=!1,this.startTime=e,this.directionLockAction.reset(),this.scrollBehaviorX.start(),this.scrollBehaviorY.start(),this.animater.stop(),this.scrollBehaviorX.resetStartPos(),this.scrollBehaviorY.resetStartPos(),this.hooks.trigger(this.hooks.eventTypes.start,t)},t.prototype.handleMove=function(t,e,i){if(!this.hooks.trigger(this.hooks.eventTypes.beforeMove,i)){var o=this.scrollBehaviorX.getAbsDist(t),n=this.scrollBehaviorY.getAbsDist(e),r=u();if(this.checkMomentum(o,n,r))return!0;if(this.directionLockAction.checkMovingDirection(o,n,i))return this.actionsHandler.setInitiated(),!0;var s=this.directionLockAction.adjustDelta(t,e),a=this.scrollBehaviorX.move(s.deltaX),c=this.scrollBehaviorY.move(s.deltaY);this.moved||(this.moved=!0,this.hooks.trigger(this.hooks.eventTypes.scrollStart)),this.animater.translate({x:a,y:c}),this.dispatchScroll(r)}},t.prototype.dispatchScroll=function(t){t-this.startTime>this.options.momentumLimitTime&&(this.startTime=t,this.scrollBehaviorX.updateStartPos(),this.scrollBehaviorY.updateStartPos(),this.options.probeType===U.Throttle&&this.hooks.trigger(this.hooks.eventTypes.scroll,this.getCurrentPos())),this.options.probeType>U.Throttle&&this.hooks.trigger(this.hooks.eventTypes.scroll,this.getCurrentPos())},t.prototype.checkMomentum=function(t,e,i){return i-this.endTime>this.options.momentumLimitTime&&e1&&tthis.scrollBehaviorX.minScrollPos||i.newXthis.scrollBehaviorY.minScrollPos||i.newY1&&void 0!==arguments[1]?arguments[1]:0,i=this.direction?this.calcScrollX(t):0,o=this.direction?0:this.calcScrollX(t);this.bs.scrollTo(i,o,e)},scroll:function(t){var e=this.calcValue(t);this.$emit("input",e),this.$emit("scroll",{value:e,e:t})},scrollEnd:function(t){var e=t.x/this.interval,i=this.calcValue(t),o=this.direction?this.calcScrollX(i):0,n=this.direction?0:this.calcScrollX(i);this.bs.scrollTo(o,n,300),Number.isInteger(e)&&this.$emit("scrollEnd",{value:i,e:t})},calcScrollX:function(t){return-((t-this.min)*this.interval/this.ratio)},calcValue:function(t){var e=t.x,i=t.y,o=this.direction?e:i,n=Math.round(o/this.interval),r=Math.abs(n*this.ratio)+this.min;return Number(this.limbNumber(r))},limbNumber:function(t){return Number.isInteger(t)?parseInt(t):t.toFixed(1)},scaleList:function(){for(var t=this.$createElement,e=this.interval*this.group,i=this.group*this.interval,o=e/2-this.interval,n=this.max/this.ratio/this.group,r=this.min/this.ratio/this.group,s=e-this.interval+1,a=(e-this.interval+1)/2,c=this.direction?s:a,h=this.direction?a:s,l=[],u=r;u<=n;u++){var p=u*this.ratio*this.group,d=u===r,f="".concat(d?this.interval:i,"px"),v="".concat(d?this.interval:i,"px"),m=d?4*-String(this.min).length:o,g=this.direction?"rotateX":"rotateY",y=t("li",{key:u,class:["limb",d?"first-li":null],style:{width:this.direction?f:"inherit",height:this.direction?"inherit":v,"background-size":"".concat(c,"px ").concat(h,"px")}},[t("i",{class:["limb-number",this.flipVertical?g:null],style:{color:this.color,left:"".concat(this.direction?m:0,"px"),top:"".concat(this.direction?null:2*m-4,"px")}},[this.limbNumber(p)])]);l.push(y)}return l}},render:function(){var t=arguments[0],e=this.scaleSize/2,i=e>0?e:0,o=(this.max-this.min)/this.ratio,n=o*this.interval+2*i,r=o*this.interval+2*i,s=this.direction?"rotateX(180deg)":"rotateY(180deg)",a=t("li",{class:"placeholder",style:{width:this.direction?"".concat(parseInt(i),"px"):"inherit",height:this.direction?"inherit":"".concat(parseInt(i),"px")}});return t("div",{class:["clown-scale",this.type,this.mask?"clown-scale-mask":null],ref:"scale",style:{transform:this.flipVertical?s:null,width:this.direction?"100%":"60px",height:this.direction?"60px":"100%"}},[this.$slots.standard?this.$slots.standard:t("div",{class:"standard"},[t("span",{class:"standard-line",style:{transform:this.direction?"translateX(".concat(e,"px)"):"translateY(".concat(e,"px)")}})]),t("div",{ref:"scroll",class:"clown-scale-swiper"},[t("ul",{class:"swiper",style:{width:this.direction?"".concat(n,"px"):"inherit",height:this.direction?"inherit":"".concat(r,"px")}},[a,this.scaleList(),a])])])},install:function(t){return t.component(yt.name,yt)}});e.default=yt}])})); -------------------------------------------------------------------------------- /demo/8732e452c9f76f287f35a4ff038c0419.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuclown/vue-scale/460ae2316ded87415d8cbb73665ad1d9ce9dd19a/demo/8732e452c9f76f287f35a4ff038c0419.png -------------------------------------------------------------------------------- /demo/ef356f706a20cd6caab79533f42f4bdf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wuclown/vue-scale/460ae2316ded87415d8cbb73665ad1d9ce9dd19a/demo/ef356f706a20cd6caab79533f42f4bdf.png -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Document 15 | 22 | 23 | 24 |
    25 | 26 | 27 | -------------------------------------------------------------------------------- /demo/index.js: -------------------------------------------------------------------------------- 1 | !function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n=e();for(var r in n)("object"==typeof exports?exports:t)[r]=n[r]}}(window,(function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=14)}([function(t,e){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(t){"object"==typeof window&&(n=window)}t.exports=n},function(t,e,n){"use strict";(function(t,n){ 2 | /*! 3 | * Vue.js v2.6.10 4 | * (c) 2014-2019 Evan You 5 | * Released under the MIT License. 6 | */ 7 | var r=Object.freeze({});function o(t){return null==t}function i(t){return null!=t}function s(t){return!0===t}function a(t){return"string"==typeof t||"number"==typeof t||"symbol"==typeof t||"boolean"==typeof t}function c(t){return null!==t&&"object"==typeof t}var l=Object.prototype.toString;function u(t){return"[object Object]"===l.call(t)}function h(t){return"[object RegExp]"===l.call(t)}function p(t){var e=parseFloat(String(t));return e>=0&&Math.floor(e)===e&&isFinite(t)}function f(t){return i(t)&&"function"==typeof t.then&&"function"==typeof t.catch}function d(t){return null==t?"":Array.isArray(t)||u(t)&&t.toString===l?JSON.stringify(t,null,2):String(t)}function v(t){var e=parseFloat(t);return isNaN(e)?t:e}function m(t,e){for(var n=Object.create(null),r=t.split(","),o=0;o-1)return t.splice(n,1)}}var b=Object.prototype.hasOwnProperty;function w(t,e){return b.call(t,e)}function k(t){var e=Object.create(null);return function(n){return e[n]||(e[n]=t(n))}}var _=/-(\w)/g,T=k((function(t){return t.replace(_,(function(t,e){return e?e.toUpperCase():""}))})),S=k((function(t){return t.charAt(0).toUpperCase()+t.slice(1)})),A=/\B([A-Z])/g,x=k((function(t){return t.replace(A,"-$1").toLowerCase()}));var C=Function.prototype.bind?function(t,e){return t.bind(e)}:function(t,e){function n(n){var r=arguments.length;return r?r>1?t.apply(e,arguments):t.call(e,n):t.call(e)}return n._length=t.length,n};function E(t,e){e=e||0;for(var n=t.length-e,r=new Array(n);n--;)r[n]=t[n+e];return r}function O(t,e){for(var n in e)t[n]=e[n];return t}function P(t){for(var e={},n=0;n0,K=W&&W.indexOf("edge/")>0,q=(W&&W.indexOf("android"),W&&/iphone|ipad|ipod|ios/.test(W)||"ios"===U),tt=(W&&/chrome\/\d+/.test(W),W&&/phantomjs/.test(W),W&&W.match(/firefox\/(\d+)/)),et={}.watch,nt=!1;if(V)try{var rt={};Object.defineProperty(rt,"passive",{get:function(){nt=!0}}),window.addEventListener("test-passive",null,rt)}catch(t){}var ot=function(){return void 0===H&&(H=!V&&!Z&&void 0!==t&&(t.process&&"server"===t.process.env.VUE_ENV)),H},it=V&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__;function st(t){return"function"==typeof t&&/native code/.test(t.toString())}var at,ct="undefined"!=typeof Symbol&&st(Symbol)&&"undefined"!=typeof Reflect&&st(Reflect.ownKeys);at="undefined"!=typeof Set&&st(Set)?Set:function(){function t(){this.set=Object.create(null)}return t.prototype.has=function(t){return!0===this.set[t]},t.prototype.add=function(t){this.set[t]=!0},t.prototype.clear=function(){this.set=Object.create(null)},t}();var lt=D,ut=0,ht=function(){this.id=ut++,this.subs=[]};ht.prototype.addSub=function(t){this.subs.push(t)},ht.prototype.removeSub=function(t){g(this.subs,t)},ht.prototype.depend=function(){ht.target&&ht.target.addDep(this)},ht.prototype.notify=function(){var t=this.subs.slice();for(var e=0,n=t.length;e-1)if(i&&!w(o,"default"))s=!1;else if(""===s||s===x(t)){var c=zt(String,o.type);(c<0||a0&&(ue((c=t(c,(n||"")+"_"+r))[0])&&ue(u)&&(h[l]=gt(u.text+c[0].text),c.shift()),h.push.apply(h,c)):a(c)?ue(u)?h[l]=gt(u.text+c):""!==c&&h.push(gt(c)):ue(c)&&ue(u)?h[l]=gt(u.text+c.text):(s(e._isVList)&&i(c.tag)&&o(c.key)&&i(n)&&(c.key="__vlist"+n+"_"+r+"__"),h.push(c)));return h}(t):void 0}function ue(t){return i(t)&&i(t.text)&&!1===t.isComment}function he(t,e){if(t){for(var n=Object.create(null),r=ct?Reflect.ownKeys(t):Object.keys(t),o=0;o0,s=t?!!t.$stable:!i,a=t&&t.$key;if(t){if(t._normalized)return t._normalized;if(s&&n&&n!==r&&a===n.$key&&!i&&!n.$hasNormal)return n;for(var c in o={},t)t[c]&&"$"!==c[0]&&(o[c]=ve(e,c,t[c]))}else o={};for(var l in e)l in o||(o[l]=me(e,l));return t&&Object.isExtensible(t)&&(t._normalized=o),F(o,"$stable",s),F(o,"$key",a),F(o,"$hasNormal",i),o}function ve(t,e,n){var r=function(){var t=arguments.length?n.apply(null,arguments):n({});return(t=t&&"object"==typeof t&&!Array.isArray(t)?[t]:le(t))&&(0===t.length||1===t.length&&t[0].isComment)?void 0:t};return n.proxy&&Object.defineProperty(t,e,{get:r,enumerable:!0,configurable:!0}),r}function me(t,e){return function(){return t[e]}}function ye(t,e){var n,r,o,s,a;if(Array.isArray(t)||"string"==typeof t)for(n=new Array(t.length),r=0,o=t.length;rdocument.createEvent("Event").timeStamp&&(un=function(){return hn.now()})}function pn(){var t,e;for(ln=un(),an=!0,nn.sort((function(t,e){return t.id-e.id})),cn=0;cncn&&nn[n].id>t.id;)n--;nn.splice(n+1,0,t)}else nn.push(t);sn||(sn=!0,ee(pn))}}(this)},dn.prototype.run=function(){if(this.active){var t=this.get();if(t!==this.value||c(t)||this.deep){var e=this.value;if(this.value=t,this.user)try{this.cb.call(this.vm,t,e)}catch(t){Ft(t,this.vm,'callback for watcher "'+this.expression+'"')}else this.cb.call(this.vm,t,e)}}},dn.prototype.evaluate=function(){this.value=this.get(),this.dirty=!1},dn.prototype.depend=function(){for(var t=this.deps.length;t--;)this.deps[t].depend()},dn.prototype.teardown=function(){if(this.active){this.vm._isBeingDestroyed||g(this.vm._watchers,this);for(var t=this.deps.length;t--;)this.deps[t].removeSub(this);this.active=!1}};var vn={enumerable:!0,configurable:!0,get:D,set:D};function mn(t,e,n){vn.get=function(){return this[e][n]},vn.set=function(t){this[e][n]=t},Object.defineProperty(t,n,vn)}function yn(t){t._watchers=[];var e=t.$options;e.props&&function(t,e){var n=t.$options.propsData||{},r=t._props={},o=t.$options._propKeys=[];t.$parent&&St(!1);var i=function(i){o.push(i);var s=Bt(i,e,n,t);Ct(r,i,s),i in t||mn(t,"_props",i)};for(var s in e)i(s);St(!0)}(t,e.props),e.methods&&function(t,e){t.$options.props;for(var n in e)t[n]="function"!=typeof e[n]?D:C(e[n],t)}(t,e.methods),e.data?function(t){var e=t.$options.data;u(e=t._data="function"==typeof e?function(t,e){ft();try{return t.call(e,e)}catch(t){return Ft(t,e,"data()"),{}}finally{dt()}}(e,t):e||{})||(e={});var n=Object.keys(e),r=t.$options.props,o=(t.$options.methods,n.length);for(;o--;){var i=n[o];0,r&&w(r,i)||(s=void 0,36!==(s=(i+"").charCodeAt(0))&&95!==s&&mn(t,"_data",i))}var s;xt(e,!0)}(t):xt(t._data={},!0),e.computed&&function(t,e){var n=t._computedWatchers=Object.create(null),r=ot();for(var o in e){var i=e[o],s="function"==typeof i?i:i.get;0,r||(n[o]=new dn(t,s||D,D,gn)),o in t||bn(t,o,i)}}(t,e.computed),e.watch&&e.watch!==et&&function(t,e){for(var n in e){var r=e[n];if(Array.isArray(r))for(var o=0;o-1:"string"==typeof t?t.split(",").indexOf(e)>-1:!!h(t)&&t.test(e)}function On(t,e){var n=t.cache,r=t.keys,o=t._vnode;for(var i in n){var s=n[i];if(s){var a=Cn(s.componentOptions);a&&!e(a)&&Pn(n,i,r,o)}}}function Pn(t,e,n,r){var o=t[e];!o||r&&o.tag===r.tag||o.componentInstance.$destroy(),t[e]=null,g(n,e)}!function(t){t.prototype._init=function(t){var e=this;e._uid=Tn++,e._isVue=!0,t&&t._isComponent?function(t,e){var n=t.$options=Object.create(t.constructor.options),r=e._parentVnode;n.parent=e.parent,n._parentVnode=r;var o=r.componentOptions;n.propsData=o.propsData,n._parentListeners=o.listeners,n._renderChildren=o.children,n._componentTag=o.tag,e.render&&(n.render=e.render,n.staticRenderFns=e.staticRenderFns)}(e,t):e.$options=Nt(Sn(e.constructor),t||{},e),e._renderProxy=e,e._self=e,function(t){var e=t.$options,n=e.parent;if(n&&!e.abstract){for(;n.$options.abstract&&n.$parent;)n=n.$parent;n.$children.push(t)}t.$parent=n,t.$root=n?n.$root:t,t.$children=[],t.$refs={},t._watcher=null,t._inactive=null,t._directInactive=!1,t._isMounted=!1,t._isDestroyed=!1,t._isBeingDestroyed=!1}(e),function(t){t._events=Object.create(null),t._hasHookEvent=!1;var e=t.$options._parentListeners;e&&Je(t,e)}(e),function(t){t._vnode=null,t._staticTrees=null;var e=t.$options,n=t.$vnode=e._parentVnode,o=n&&n.context;t.$slots=pe(e._renderChildren,o),t.$scopedSlots=r,t._c=function(e,n,r,o){return ze(t,e,n,r,o,!1)},t.$createElement=function(e,n,r,o){return ze(t,e,n,r,o,!0)};var i=n&&n.data;Ct(t,"$attrs",i&&i.attrs||r,null,!0),Ct(t,"$listeners",e._parentListeners||r,null,!0)}(e),en(e,"beforeCreate"),function(t){var e=he(t.$options.inject,t);e&&(St(!1),Object.keys(e).forEach((function(n){Ct(t,n,e[n])})),St(!0))}(e),yn(e),function(t){var e=t.$options.provide;e&&(t._provided="function"==typeof e?e.call(t):e)}(e),en(e,"created"),e.$options.el&&e.$mount(e.$options.el)}}(An),function(t){var e={get:function(){return this._data}},n={get:function(){return this._props}};Object.defineProperty(t.prototype,"$data",e),Object.defineProperty(t.prototype,"$props",n),t.prototype.$set=Et,t.prototype.$delete=Ot,t.prototype.$watch=function(t,e,n){if(u(e))return _n(this,t,e,n);(n=n||{}).user=!0;var r=new dn(this,t,e,n);if(n.immediate)try{e.call(this,r.value)}catch(t){Ft(t,this,'callback for immediate watcher "'+r.expression+'"')}return function(){r.teardown()}}}(An),function(t){var e=/^hook:/;t.prototype.$on=function(t,n){var r=this;if(Array.isArray(t))for(var o=0,i=t.length;o1?E(n):n;for(var r=E(arguments,1),o='event handler for "'+t+'"',i=0,s=n.length;iparseInt(this.max)&&Pn(s,a[0],a,this._vnode)),e.data.keepAlive=!0}return e||t&&t[0]}}};!function(t){var e={get:function(){return Y}};Object.defineProperty(t,"config",e),t.util={warn:lt,extend:O,mergeOptions:Nt,defineReactive:Ct},t.set=Et,t.delete=Ot,t.nextTick=ee,t.observable=function(t){return xt(t),t},t.options=Object.create(null),B.forEach((function(e){t.options[e+"s"]=Object.create(null)})),t.options._base=t,O(t.options.components,In),function(t){t.use=function(t){var e=this._installedPlugins||(this._installedPlugins=[]);if(e.indexOf(t)>-1)return this;var n=E(arguments,1);return n.unshift(this),"function"==typeof t.install?t.install.apply(t,n):"function"==typeof t&&t.apply(null,n),e.push(t),this}}(t),function(t){t.mixin=function(t){return this.options=Nt(this.options,t),this}}(t),xn(t),function(t){B.forEach((function(e){t[e]=function(t,n){return n?("component"===e&&u(n)&&(n.name=n.name||t,n=this.options._base.extend(n)),"directive"===e&&"function"==typeof n&&(n={bind:n,update:n}),this.options[e+"s"][t]=n,n):this.options[e+"s"][t]}}))}(t)}(An),Object.defineProperty(An.prototype,"$isServer",{get:ot}),Object.defineProperty(An.prototype,"$ssrContext",{get:function(){return this.$vnode&&this.$vnode.ssrContext}}),Object.defineProperty(An,"FunctionalRenderContext",{value:Ie}),An.version="2.6.10";var $n=m("style,class"),Mn=m("input,textarea,option,select,progress"),jn=m("contenteditable,draggable,spellcheck"),Nn=m("events,caret,typing,plaintext-only"),Ln=function(t,e){return Fn(e)||"false"===e?"false":"contenteditable"===t&&Nn(e)?e:"true"},Bn=m("allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,default,defaultchecked,defaultmuted,defaultselected,defer,disabled,enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,required,reversed,scoped,seamless,selected,sortable,translate,truespeed,typemustmatch,visible"),Rn="http://www.w3.org/1999/xlink",Yn=function(t){return":"===t.charAt(5)&&"xlink"===t.slice(0,5)},zn=function(t){return Yn(t)?t.slice(6,t.length):""},Fn=function(t){return null==t||!1===t};function Xn(t){for(var e=t.data,n=t,r=t;i(r.componentInstance);)(r=r.componentInstance._vnode)&&r.data&&(e=Hn(r.data,e));for(;i(n=n.parent);)n&&n.data&&(e=Hn(e,n.data));return function(t,e){if(i(t)||i(e))return Gn(t,Vn(e));return""}(e.staticClass,e.class)}function Hn(t,e){return{staticClass:Gn(t.staticClass,e.staticClass),class:i(t.class)?[t.class,e.class]:e.class}}function Gn(t,e){return t?e?t+" "+e:t:e||""}function Vn(t){return Array.isArray(t)?function(t){for(var e,n="",r=0,o=t.length;r-1?vr(t,e,n):Bn(e)?Fn(n)?t.removeAttribute(e):(n="allowfullscreen"===e&&"EMBED"===t.tagName?"true":e,t.setAttribute(e,n)):jn(e)?t.setAttribute(e,Ln(e,n)):Yn(e)?Fn(n)?t.removeAttributeNS(Rn,zn(e)):t.setAttributeNS(Rn,e,n):vr(t,e,n)}function vr(t,e,n){if(Fn(n))t.removeAttribute(e);else{if(J&&!Q&&"TEXTAREA"===t.tagName&&"placeholder"===e&&""!==n&&!t.__ieph){var r=function(e){e.stopImmediatePropagation(),t.removeEventListener("input",r)};t.addEventListener("input",r),t.__ieph=!0}t.setAttribute(e,n)}}var mr={create:fr,update:fr};function yr(t,e){var n=e.elm,r=e.data,s=t.data;if(!(o(r.staticClass)&&o(r.class)&&(o(s)||o(s.staticClass)&&o(s.class)))){var a=Xn(e),c=n._transitionClasses;i(c)&&(a=Gn(a,Vn(c))),a!==n._prevClass&&(n.setAttribute("class",a),n._prevClass=a)}}var gr,br={create:yr,update:yr},wr="__r",kr="__c";function _r(t,e,n){var r=gr;return function o(){var i=e.apply(null,arguments);null!==i&&Ar(t,o,n,r)}}var Tr=Zt&&!(tt&&Number(tt[1])<=53);function Sr(t,e,n,r){if(Tr){var o=ln,i=e;e=i._wrapper=function(t){if(t.target===t.currentTarget||t.timeStamp>=o||t.timeStamp<=0||t.target.ownerDocument!==document)return i.apply(this,arguments)}}gr.addEventListener(t,e,nt?{capture:n,passive:r}:n)}function Ar(t,e,n,r){(r||gr).removeEventListener(t,e._wrapper||e,n)}function xr(t,e){if(!o(t.data.on)||!o(e.data.on)){var n=e.data.on||{},r=t.data.on||{};gr=e.elm,function(t){if(i(t[wr])){var e=J?"change":"input";t[e]=[].concat(t[wr],t[e]||[]),delete t[wr]}i(t[kr])&&(t.change=[].concat(t[kr],t.change||[]),delete t[kr])}(n),se(n,r,Sr,Ar,_r,e.context),gr=void 0}}var Cr,Er={create:xr,update:xr};function Or(t,e){if(!o(t.data.domProps)||!o(e.data.domProps)){var n,r,s=e.elm,a=t.data.domProps||{},c=e.data.domProps||{};for(n in i(c.__ob__)&&(c=e.data.domProps=O({},c)),a)n in c||(s[n]="");for(n in c){if(r=c[n],"textContent"===n||"innerHTML"===n){if(e.children&&(e.children.length=0),r===a[n])continue;1===s.childNodes.length&&s.removeChild(s.childNodes[0])}if("value"===n&&"PROGRESS"!==s.tagName){s._value=r;var l=o(r)?"":String(r);Pr(s,l)&&(s.value=l)}else if("innerHTML"===n&&Wn(s.tagName)&&o(s.innerHTML)){(Cr=Cr||document.createElement("div")).innerHTML=""+r+"";for(var u=Cr.firstChild;s.firstChild;)s.removeChild(s.firstChild);for(;u.firstChild;)s.appendChild(u.firstChild)}else if(r!==a[n])try{s[n]=r}catch(t){}}}}function Pr(t,e){return!t.composing&&("OPTION"===t.tagName||function(t,e){var n=!0;try{n=document.activeElement!==t}catch(t){}return n&&t.value!==e}(t,e)||function(t,e){var n=t.value,r=t._vModifiers;if(i(r)){if(r.number)return v(n)!==v(e);if(r.trim)return n.trim()!==e.trim()}return n!==e}(t,e))}var Dr={create:Or,update:Or},Ir=k((function(t){var e={},n=/:(.+)/;return t.split(/;(?![^(]*\))/g).forEach((function(t){if(t){var r=t.split(n);r.length>1&&(e[r[0].trim()]=r[1].trim())}})),e}));function $r(t){var e=Mr(t.style);return t.staticStyle?O(t.staticStyle,e):e}function Mr(t){return Array.isArray(t)?P(t):"string"==typeof t?Ir(t):t}var jr,Nr=/^--/,Lr=/\s*!important$/,Br=function(t,e,n){if(Nr.test(e))t.style.setProperty(e,n);else if(Lr.test(n))t.style.setProperty(x(e),n.replace(Lr,""),"important");else{var r=Yr(e);if(Array.isArray(n))for(var o=0,i=n.length;o-1?e.split(Xr).forEach((function(e){return t.classList.add(e)})):t.classList.add(e);else{var n=" "+(t.getAttribute("class")||"")+" ";n.indexOf(" "+e+" ")<0&&t.setAttribute("class",(n+e).trim())}}function Gr(t,e){if(e&&(e=e.trim()))if(t.classList)e.indexOf(" ")>-1?e.split(Xr).forEach((function(e){return t.classList.remove(e)})):t.classList.remove(e),t.classList.length||t.removeAttribute("class");else{for(var n=" "+(t.getAttribute("class")||"")+" ",r=" "+e+" ";n.indexOf(r)>=0;)n=n.replace(r," ");(n=n.trim())?t.setAttribute("class",n):t.removeAttribute("class")}}function Vr(t){if(t){if("object"==typeof t){var e={};return!1!==t.css&&O(e,Zr(t.name||"v")),O(e,t),e}return"string"==typeof t?Zr(t):void 0}}var Zr=k((function(t){return{enterClass:t+"-enter",enterToClass:t+"-enter-to",enterActiveClass:t+"-enter-active",leaveClass:t+"-leave",leaveToClass:t+"-leave-to",leaveActiveClass:t+"-leave-active"}})),Ur=V&&!Q,Wr="transition",Jr="animation",Qr="transition",Kr="transitionend",qr="animation",to="animationend";Ur&&(void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend&&(Qr="WebkitTransition",Kr="webkitTransitionEnd"),void 0===window.onanimationend&&void 0!==window.onwebkitanimationend&&(qr="WebkitAnimation",to="webkitAnimationEnd"));var eo=V?window.requestAnimationFrame?window.requestAnimationFrame.bind(window):setTimeout:function(t){return t()};function no(t){eo((function(){eo(t)}))}function ro(t,e){var n=t._transitionClasses||(t._transitionClasses=[]);n.indexOf(e)<0&&(n.push(e),Hr(t,e))}function oo(t,e){t._transitionClasses&&g(t._transitionClasses,e),Gr(t,e)}function io(t,e,n){var r=ao(t,e),o=r.type,i=r.timeout,s=r.propCount;if(!o)return n();var a=o===Wr?Kr:to,c=0,l=function(){t.removeEventListener(a,u),n()},u=function(e){e.target===t&&++c>=s&&l()};setTimeout((function(){c0&&(n=Wr,u=s,h=i.length):e===Jr?l>0&&(n=Jr,u=l,h=c.length):h=(n=(u=Math.max(s,l))>0?s>l?Wr:Jr:null)?n===Wr?i.length:c.length:0,{type:n,timeout:u,propCount:h,hasTransform:n===Wr&&so.test(r[Qr+"Property"])}}function co(t,e){for(;t.length1}function vo(t,e){!0!==e.data.show&&uo(e)}var mo=function(t){var e,n,r={},c=t.modules,l=t.nodeOps;for(e=0;ed?b(t,o(n[y+1])?null:n[y+1].elm,n,f,y,r):f>y&&k(0,e,p,d)}(p,m,y,n,u):i(y)?(i(t.text)&&l.setTextContent(p,""),b(p,null,y,0,y.length-1,n)):i(m)?k(0,m,0,m.length-1):i(t.text)&&l.setTextContent(p,""):t.text!==e.text&&l.setTextContent(p,e.text),i(d)&&i(f=d.hook)&&i(f=f.postpatch)&&f(t,e)}}}function A(t,e,n){if(s(n)&&i(t.parent))t.parent.data.pendingInsert=e;else for(var r=0;r-1,s.selected!==i&&(s.selected=i);else if(M(ko(s),r))return void(t.selectedIndex!==a&&(t.selectedIndex=a));o||(t.selectedIndex=-1)}}function wo(t,e){return e.every((function(e){return!M(e,t)}))}function ko(t){return"_value"in t?t._value:t.value}function _o(t){t.target.composing=!0}function To(t){t.target.composing&&(t.target.composing=!1,So(t.target,"input"))}function So(t,e){var n=document.createEvent("HTMLEvents");n.initEvent(e,!0,!0),t.dispatchEvent(n)}function Ao(t){return!t.componentInstance||t.data&&t.data.transition?t:Ao(t.componentInstance._vnode)}var xo={model:yo,show:{bind:function(t,e,n){var r=e.value,o=(n=Ao(n)).data&&n.data.transition,i=t.__vOriginalDisplay="none"===t.style.display?"":t.style.display;r&&o?(n.data.show=!0,uo(n,(function(){t.style.display=i}))):t.style.display=r?i:"none"},update:function(t,e,n){var r=e.value;!r!=!e.oldValue&&((n=Ao(n)).data&&n.data.transition?(n.data.show=!0,r?uo(n,(function(){t.style.display=t.__vOriginalDisplay})):ho(n,(function(){t.style.display="none"}))):t.style.display=r?t.__vOriginalDisplay:"none")},unbind:function(t,e,n,r,o){o||(t.style.display=t.__vOriginalDisplay)}}},Co={name:String,appear:Boolean,css:Boolean,mode:String,type:String,enterClass:String,leaveClass:String,enterToClass:String,leaveToClass:String,enterActiveClass:String,leaveActiveClass:String,appearClass:String,appearActiveClass:String,appearToClass:String,duration:[Number,String,Object]};function Eo(t){var e=t&&t.componentOptions;return e&&e.Ctor.options.abstract?Eo(Ve(e.children)):t}function Oo(t){var e={},n=t.$options;for(var r in n.propsData)e[r]=t[r];var o=n._parentListeners;for(var i in o)e[T(i)]=o[i];return e}function Po(t,e){if(/\d-keep-alive$/.test(e.tag))return t("keep-alive",{props:e.componentOptions.propsData})}var Do=function(t){return t.tag||Ge(t)},Io=function(t){return"show"===t.name},$o={name:"transition",props:Co,abstract:!0,render:function(t){var e=this,n=this.$slots.default;if(n&&(n=n.filter(Do)).length){0;var r=this.mode;0;var o=n[0];if(function(t){for(;t=t.parent;)if(t.data.transition)return!0}(this.$vnode))return o;var i=Eo(o);if(!i)return o;if(this._leaving)return Po(t,o);var s="__transition-"+this._uid+"-";i.key=null==i.key?i.isComment?s+"comment":s+i.tag:a(i.key)?0===String(i.key).indexOf(s)?i.key:s+i.key:i.key;var c=(i.data||(i.data={})).transition=Oo(this),l=this._vnode,u=Eo(l);if(i.data.directives&&i.data.directives.some(Io)&&(i.data.show=!0),u&&u.data&&!function(t,e){return e.key===t.key&&e.tag===t.tag}(i,u)&&!Ge(u)&&(!u.componentInstance||!u.componentInstance._vnode.isComment)){var h=u.data.transition=O({},c);if("out-in"===r)return this._leaving=!0,ae(h,"afterLeave",(function(){e._leaving=!1,e.$forceUpdate()})),Po(t,o);if("in-out"===r){if(Ge(i))return l;var p,f=function(){p()};ae(c,"afterEnter",f),ae(c,"enterCancelled",f),ae(h,"delayLeave",(function(t){p=t}))}}return o}}},Mo=O({tag:String,moveClass:String},Co);function jo(t){t.elm._moveCb&&t.elm._moveCb(),t.elm._enterCb&&t.elm._enterCb()}function No(t){t.data.newPos=t.elm.getBoundingClientRect()}function Lo(t){var e=t.data.pos,n=t.data.newPos,r=e.left-n.left,o=e.top-n.top;if(r||o){t.data.moved=!0;var i=t.elm.style;i.transform=i.WebkitTransform="translate("+r+"px,"+o+"px)",i.transitionDuration="0s"}}delete Mo.mode;var Bo={Transition:$o,TransitionGroup:{props:Mo,beforeMount:function(){var t=this,e=this._update;this._update=function(n,r){var o=Ke(t);t.__patch__(t._vnode,t.kept,!1,!0),t._vnode=t.kept,o(),e.call(t,n,r)}},render:function(t){for(var e=this.tag||this.$vnode.data.tag||"span",n=Object.create(null),r=this.prevChildren=this.children,o=this.$slots.default||[],i=this.children=[],s=Oo(this),a=0;a-1?Qn[t]=e.constructor===window.HTMLUnknownElement||e.constructor===window.HTMLElement:Qn[t]=/HTMLUnknownElement/.test(e.toString())},O(An.options.directives,xo),O(An.options.components,Bo),An.prototype.__patch__=V?mo:D,An.prototype.$mount=function(t,e){return function(t,e,n){var r;return t.$el=e,t.$options.render||(t.$options.render=yt),en(t,"beforeMount"),r=function(){t._update(t._render(),n)},new dn(t,r,D,{before:function(){t._isMounted&&!t._isDestroyed&&en(t,"beforeUpdate")}},!0),n=!1,null==t.$vnode&&(t._isMounted=!0,en(t,"mounted")),t}(this,t=t&&V?function(t){if("string"==typeof t){var e=document.querySelector(t);return e||document.createElement("div")}return t}(t):void 0,e)},V&&setTimeout((function(){Y.devtools&&it&&it.emit("init",An)}),0),e.a=An}).call(this,n(0),n(11).setImmediate)},function(t,e,n){var r=n(3);"string"==typeof r&&(r=[[t.i,r,""]]);var o={insert:"head",singleton:!1};n(10)(r,o);r.locals&&(t.exports=r.locals)},function(t,e,n){e=t.exports=n(4)(!1);var r=n(5),o=r(n(6)),i=r(n(7)),s=r(n(8)),a=r(n(9));e.push([t.i,'.mask {\n content: "";\n position: absolute;\n top: 0px;\n height: inherit;\n width: 50%;\n z-index: 99;\n pointer-events: none;\n}\n.clown-scale {\n position: relative;\n background-color: #ffffff;\n}\n.clown-scale.clown-scale-mask::before {\n content: "";\n position: absolute;\n top: 0px;\n height: inherit;\n width: 50%;\n z-index: 99;\n pointer-events: none;\n left: 0px;\n background-image: linear-gradient(to right, white, rgba(255, 255, 255, 0));\n}\n.clown-scale.clown-scale-mask::after {\n content: "";\n position: absolute;\n top: 0px;\n height: inherit;\n width: 50%;\n z-index: 99;\n pointer-events: none;\n right: 0px;\n background-image: linear-gradient(to right, rgba(255, 255, 255, 0), white);\n}\n.clown-scale > .standard {\n position: relative;\n}\n.clown-scale > .standard > .standard-line {\n position: absolute;\n left: 0px;\n top: -1px;\n display: block;\n margin-left: -6px;\n z-index: 99;\n border-top: 6px #ff9901 dashed;\n border-left: 6px transparent dashed;\n border-bottom: 6px transparent dashed;\n border-right: 6px transparent solid;\n}\n.clown-scale > .clown-scale-swiper {\n position: relative;\n width: 100%;\n overflow: hidden;\n height: inherit;\n z-index: 1;\n}\n.clown-scale > .clown-scale-swiper > .swiper {\n height: inherit;\n background-color: none;\n transition-timing-function: cubic-bezier(0, 0.3, 0.8, 1);\n margin: 0px;\n padding: 0px;\n}\n.clown-scale > .clown-scale-swiper > .swiper > .placeholder {\n display: inline-block;\n height: inherit;\n}\n.clown-scale > .clown-scale-swiper > .swiper > .limb {\n display: inline-block;\n height: inherit;\n background-image: url('+o+");\n background-repeat: no-repeat;\n position: relative;\n}\n.clown-scale > .clown-scale-swiper > .swiper > .limb > .limb-number {\n position: absolute;\n bottom: 0px;\n font-style: normal;\n width: 100%;\n text-align: center;\n}\n.clown-scale > .clown-scale-swiper > .swiper > .limb > .limb-number.rotateX {\n transform: rotateX(180deg);\n}\n.clown-scale > .clown-scale-swiper > .swiper > .first-li {\n background-image: url("+i+');\n}\n.clown-scale.verticality.clown-scale-mask::before {\n content: "";\n position: absolute;\n height: inherit;\n width: 50%;\n z-index: 99;\n pointer-events: none;\n top: 0px;\n width: 100%;\n height: 50%;\n background-image: linear-gradient(to bottom, white, rgba(255, 255, 255, 0));\n}\n.clown-scale.verticality.clown-scale-mask::after {\n content: "";\n position: absolute;\n top: 0px;\n height: inherit;\n width: 50%;\n z-index: 99;\n pointer-events: none;\n bottom: 0px;\n width: 100%;\n height: 50%;\n top: auto;\n background-image: linear-gradient(to top, white, rgba(255, 255, 255, 0));\n}\n.clown-scale.verticality > .standard > .standard-line {\n margin-left: 0px;\n border-top: 6px transparent dashed;\n border-left: 6px #ff9901 dashed;\n}\n.clown-scale.verticality > .clown-scale-swiper > .swiper > .limb {\n background-image: url('+s+");\n background-position: top left;\n display: block;\n}\n.clown-scale.verticality > .clown-scale-swiper > .swiper > .limb > .limb-number {\n text-align: right;\n bottom: auto;\n}\n.clown-scale.verticality > .clown-scale-swiper > .swiper > .limb > .limb-number.rotateY {\n transform: rotateY(180deg);\n text-align: left;\n}\n.clown-scale.verticality > .clown-scale-swiper > .swiper > .first-li {\n background-image: url("+a+");\n background-position: top left;\n}\n.clown-scale.verticality > .clown-scale-swiper > .swiper > .first-li > .limb-number {\n top: -12px !important;\n}\n",""])},function(t,e,n){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n=function(t,e){var n=t[1]||"",r=t[3];if(!r)return n;if(e&&"function"==typeof btoa){var o=(s=r,a=btoa(unescape(encodeURIComponent(JSON.stringify(s)))),c="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(a),"/*# ".concat(c," */")),i=r.sources.map((function(t){return"/*# sourceURL=".concat(r.sourceRoot).concat(t," */")}));return[n].concat(i).concat([o]).join("\n")}var s,a,c;return[n].join("\n")}(e,t);return e[2]?"@media ".concat(e[2],"{").concat(n,"}"):n})).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},o=0;o=0&&(t._idleTimeoutId=setTimeout((function(){t._onTimeout&&t._onTimeout()}),e))},n(12),e.setImmediate="undefined"!=typeof self&&self.setImmediate||void 0!==t&&t.setImmediate||this&&this.setImmediate,e.clearImmediate="undefined"!=typeof self&&self.clearImmediate||void 0!==t&&t.clearImmediate||this&&this.clearImmediate}).call(this,n(0))},function(t,e,n){(function(t,e){!function(t,n){"use strict";if(!t.setImmediate){var r,o,i,s,a,c=1,l={},u=!1,h=t.document,p=Object.getPrototypeOf&&Object.getPrototypeOf(t);p=p&&p.setTimeout?p:t,"[object process]"==={}.toString.call(t.process)?r=function(t){e.nextTick((function(){d(t)}))}:!function(){if(t.postMessage&&!t.importScripts){var e=!0,n=t.onmessage;return t.onmessage=function(){e=!1},t.postMessage("","*"),t.onmessage=n,e}}()?t.MessageChannel?((i=new MessageChannel).port1.onmessage=function(t){d(t.data)},r=function(t){i.port2.postMessage(t)}):h&&"onreadystatechange"in h.createElement("script")?(o=h.documentElement,r=function(t){var e=h.createElement("script");e.onreadystatechange=function(){d(t),e.onreadystatechange=null,o.removeChild(e),e=null},o.appendChild(e)}):r=function(t){setTimeout(d,0,t)}:(s="setImmediate$"+Math.random()+"$",a=function(e){e.source===t&&"string"==typeof e.data&&0===e.data.indexOf(s)&&d(+e.data.slice(s.length))},t.addEventListener?t.addEventListener("message",a,!1):t.attachEvent("onmessage",a),r=function(e){t.postMessage(s+e,"*")}),p.setImmediate=function(t){"function"!=typeof t&&(t=new Function(""+t));for(var e=new Array(arguments.length-1),n=0;n1)for(var n=1;n0;function f(){return window.performance&&window.performance.now?window.performance.now()+window.performance.timing.navigationStart:+new Date}function d(t){for(var e=[],n=1;ndocument.documentElement.clientWidth-this.options.momentumLimitDistance||sdocument.documentElement.clientHeight-this.options.momentumLimitDistance)&&this.end(t)}}},t.prototype.end=function(t){O[t.type]===this.initiated&&(this.setInitiated(),this.beforeHandler(t,"end"),this.hooks.trigger(this.hooks.eventTypes.end,t))},t.prototype.click=function(t){this.hooks.trigger(this.hooks.eventTypes.click,t)},t.prototype.destroy=function(){this.wrapperEventRegister.destroy(),this.targetEventRegister.destroy(),this.hooks.destroy()},t}(),q={x:["translateX","px"],y:["translateY","px"]},tt=function(){function t(t){this.content=t,this.style=t.style,this.hooks=new W(["beforeTranslate","translate"])}return t.prototype.getComputedPosition=function(){var t=window.getComputedStyle(this.content,null)[E.transform].split(")")[0].split(", ");return{x:+(t[12]||t[4]),y:+(t[13]||t[5])}},t.prototype.translate=function(t){var e=[];Object.keys(t).forEach((function(n){if(q[n]){var r=q[n][0];if(r){var o=q[n][1],i=t[n];e.push(r+"("+i+o+")")}}})),this.hooks.trigger(this.hooks.eventTypes.beforeTranslate,e,t),this.style[E.transform]=""+e.join(" "),this.hooks.trigger(this.hooks.eventTypes.translate,t)},t.prototype.destroy=function(){this.hooks.destroy()},t}(),et=function(){function t(t,e,n){this.content=t,this.translater=e,this.options=n,this.hooks=new W(["move","end","beforeForceStop","forceStop","time","timeFunction"]),this.style=t.style}return t.prototype.translate=function(t){this.translater.translate(t)},t.prototype.setPending=function(t){this.pending=t},t.prototype.setForceStopped=function(t){this.forceStopped=t},t.prototype.destroy=function(){this.hooks.destroy(),B(this.timer)},t}(),nt=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return s(e,t),e.prototype.startProbe=function(){var t=this,e=function(){var n=t.translater.getComputedPosition();t.hooks.trigger(t.hooks.eventTypes.move,n),t.pending?t.timer=L(e):t.hooks.trigger(t.hooks.eventTypes.end,n)};B(this.timer),this.timer=L(e)},e.prototype.transitionTime=function(t){void 0===t&&(t=0),this.style[E.transitionDuration]=t+"ms",this.hooks.trigger(this.hooks.eventTypes.time,t)},e.prototype.transitionTimingFunction=function(t){this.style[E.transitionTimingFunction]=t,this.hooks.trigger(this.hooks.eventTypes.timeFunction,t)},e.prototype.move=function(t,e,n,r,o){this.setPending(n>0&&(t.x!==e.x||t.y!==e.y)),this.transitionTimingFunction(r),this.transitionTime(n),this.translate(e),n&&this.options.probeType===U.Realtime&&this.startProbe(),n||(this._reflow=this.content.offsetHeight),n||o||(this.hooks.trigger(this.hooks.eventTypes.move,e),this.hooks.trigger(this.hooks.eventTypes.end,e))},e.prototype.stop=function(){if(this.pending){this.setPending(!1),B(this.timer);var t=this.translater.getComputedPosition(),e=t.x,n=t.y;if(this.transitionTime(),this.translate({x:e,y:n}),this.setForceStopped(!0),this.hooks.trigger(this.hooks.eventTypes.beforeForceStop,{x:e,y:n}))return;this.hooks.trigger(this.hooks.eventTypes.forceStop,{x:e,y:n})}},e}(et),rt=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return s(e,t),e.prototype.move=function(t,e,n,r,o){if(!n){if(this.translate(e),this._reflow=this.content.offsetHeight,o)return;return this.hooks.trigger(this.hooks.eventTypes.move,e),void this.hooks.trigger(this.hooks.eventTypes.end,e)}this.animate(t,e,n,r)},e.prototype.animate=function(t,e,n,r){var o=this,i=f(),s=i+n,a=function(){var c=f();if(c>=s)return o.translate(e),o.hooks.trigger(o.hooks.eventTypes.move,e),void o.hooks.trigger(o.hooks.eventTypes.end,e);var l=r(c=(c-i)/n),u={};Object.keys(e).forEach((function(n){var r=t[n],o=e[n];u[n]=(o-r)*l+r})),o.translate(u),o.pending&&(o.timer=L(a)),o.options.probeType===U.Realtime&&o.hooks.trigger(o.hooks.eventTypes.move,u)};this.setPending(!0),B(this.timer),a()},e.prototype.stop=function(){if(this.pending){this.setPending(!1),B(this.timer);var t=this.translater.getComputedPosition();if(this.setForceStopped(!0),this.hooks.trigger(this.hooks.eventTypes.beforeForceStop,t))return;this.hooks.trigger(this.hooks.eventTypes.forceStop,t)}},e}(et);var ot,it,st,at,ct,lt=function(){function t(t,e){this.wrapper=t,this.options=e,this.hooks=new W(["momentum","end"]),this.content=this.wrapper.children[0],this.currentPos=0,this.startPos=0}return t.prototype.start=function(){this.direction=X.Default,this.movingDirection=X.Default,this.dist=0},t.prototype.move=function(t){t=this.hasScroll?t:0,this.movingDirection=t>0?X.Negative:t<0?X.Positive:X.Default;var e=this.currentPos+t;return(e>this.minScrollPos||ethis.minScrollPos&&this.options.bounces[0]||ethis.minScrollPos?this.minScrollPos:this.maxScrollPos),e},t.prototype.end=function(t){var e={duration:0},n=Math.abs(this.currentPos-this.startPos);if(this.options.momentum&&tthis.options.momentumLimitDistance){var r=this.direction===X.Negative&&this.options.bounces[0]||this.direction===X.Positive&&this.options.bounces[1]?this.wrapperSize:0;e=this.hasScroll?this.momentum(this.currentPos,this.startPos,t,this.maxScrollPos,this.minScrollPos,r,this.options):{destination:this.currentPos,duration:0}}else this.hooks.trigger(this.hooks.eventTypes.end,e);return e},t.prototype.momentum=function(t,e,n,r,o,i,s){void 0===s&&(s=this.options);var a=t-e,c=Math.abs(a)/n,l=s.deceleration,u=s.swipeBounceTime,h={destination:t+c/l*(a<0?-1:1),duration:s.swipeTime,rate:15};return this.hooks.trigger(this.hooks.eventTypes.momentum,h,a),h.destinationo&&(h.destination=i?Math.min(o+i/4,o+i/h.rate*c):o,h.duration=u),h.destination=Math.round(h.destination),h},t.prototype.updateDirection=function(){var t=Math.round(this.currentPos)-this.absStartPos;this.direction=t>0?X.Negative:t<0?X.Positive:X.Default},t.prototype.refresh=function(){var t=this.options.rect,e=t.size,n=t.position,r="static"===window.getComputedStyle(this.wrapper,null).position,o=P(this.wrapper);this.wrapperSize=o[e];var i=P(this.content);this.contentSize=i[e],this.relativeOffset=i[n],r&&(this.relativeOffset-=o[n]),this.minScrollPos=0,this.maxScrollPos=this.wrapperSize-this.contentSize,this.maxScrollPos<0&&(this.maxScrollPos-=this.relativeOffset,this.minScrollPos=-this.relativeOffset),this.hasScroll=this.options.scrollable&&this.maxScrollPosthis.minScrollPos?e=this.minScrollPos:ee+this.directionLockThreshold?this.directionLocked=H.Horizontal:e>=t+this.directionLockThreshold?this.directionLocked=H.Vertical:this.directionLocked=H.None)},t.prototype.handleEventPassthrough=function(t){var e=ht[this.directionLocked];if(e){if(this.eventPassthrough===e[ct.Yes])return ut[ct.Yes](t);if(this.eventPassthrough===e[ct.No])return ut[ct.No](t)}return!1},t}(),ft=function(){function t(t,e,n,r,o){this.hooks=new W(["start","beforeMove","scrollStart","scroll","beforeEnd","end","scrollEnd"]),this.scrollBehaviorX=t,this.scrollBehaviorY=e,this.actionsHandler=n,this.animater=r,this.options=o,this.directionLockAction=new pt(o.directionLockThreshold,o.freeScroll,o.eventPassthrough),this.enabled=!0,this.bindActionsHandler()}return t.prototype.bindActionsHandler=function(){var t=this;this.actionsHandler.hooks.on(this.actionsHandler.hooks.eventTypes.start,(function(e){return!t.enabled||t.handleStart(e)})),this.actionsHandler.hooks.on(this.actionsHandler.hooks.eventTypes.move,(function(e){var n=e.deltaX,r=e.deltaY,o=e.e;return!t.enabled||t.handleMove(n,r,o)})),this.actionsHandler.hooks.on(this.actionsHandler.hooks.eventTypes.end,(function(e){return!t.enabled||t.handleEnd(e)})),this.actionsHandler.hooks.on(this.actionsHandler.hooks.eventTypes.click,(function(e){t.enabled&&!e._constructed&&t.handleClick(e)}))},t.prototype.handleStart=function(t){var e=f();this.moved=!1,this.startTime=e,this.directionLockAction.reset(),this.scrollBehaviorX.start(),this.scrollBehaviorY.start(),this.animater.stop(),this.scrollBehaviorX.resetStartPos(),this.scrollBehaviorY.resetStartPos(),this.hooks.trigger(this.hooks.eventTypes.start,t)},t.prototype.handleMove=function(t,e,n){if(!this.hooks.trigger(this.hooks.eventTypes.beforeMove,n)){var r=this.scrollBehaviorX.getAbsDist(t),o=this.scrollBehaviorY.getAbsDist(e),i=f();if(this.checkMomentum(r,o,i))return!0;if(this.directionLockAction.checkMovingDirection(r,o,n))return this.actionsHandler.setInitiated(),!0;var s=this.directionLockAction.adjustDelta(t,e),a=this.scrollBehaviorX.move(s.deltaX),c=this.scrollBehaviorY.move(s.deltaY);this.moved||(this.moved=!0,this.hooks.trigger(this.hooks.eventTypes.scrollStart)),this.animater.translate({x:a,y:c}),this.dispatchScroll(i)}},t.prototype.dispatchScroll=function(t){t-this.startTime>this.options.momentumLimitTime&&(this.startTime=t,this.scrollBehaviorX.updateStartPos(),this.scrollBehaviorY.updateStartPos(),this.options.probeType===U.Throttle&&this.hooks.trigger(this.hooks.eventTypes.scroll,this.getCurrentPos())),this.options.probeType>U.Throttle&&this.hooks.trigger(this.hooks.eventTypes.scroll,this.getCurrentPos())},t.prototype.checkMomentum=function(t,e,n){return n-this.endTime>this.options.momentumLimitTime&&e1&&tthis.scrollBehaviorX.minScrollPos||n.newXthis.scrollBehaviorY.minScrollPos||n.newY1&&void 0!==arguments[1]?arguments[1]:0,n=this.direction?this.calcScrollX(t):0,r=this.direction?0:this.calcScrollX(t);this.bs.scrollTo(n,r,e)},scroll:function(t){var e=this.calcValue(t);this.$emit("input",e),this.$emit("scroll",{value:e,e:t})},scrollEnd:function(t){var e=t.x/this.interval,n=this.calcValue(t),r=this.direction?this.calcScrollX(n):0,o=this.direction?0:this.calcScrollX(n);this.bs.scrollTo(r,o,300),Number.isInteger(e)&&this.$emit("scrollEnd",{value:n,e:t})},calcScrollX:function(t){return-((t-this.min)*this.interval/this.ratio)},calcValue:function(t){var e=t.x,n=t.y,r=this.direction?e:n,o=Math.round(r/this.interval),i=Math.abs(o*this.ratio)+this.min;return Number(this.limbNumber(i))},limbNumber:function(t){return Number.isInteger(t)?parseInt(t):t.toFixed(1)},scaleList:function(){for(var t=this.$createElement,e=this.interval*this.group,n=this.group*this.interval,r=e/2-this.interval,o=this.max/this.ratio/this.group,i=this.min/this.ratio/this.group,s=e-this.interval+1,a=(e-this.interval+1)/2,c=this.direction?s:a,l=this.direction?a:s,u=[],h=i;h<=o;h++){var p=h*this.ratio*this.group,f=h===i,d="".concat(f?this.interval:n,"px"),v="".concat(f?this.interval:n,"px"),m=f?4*-String(this.min).length:r,y=this.direction?"rotateX":"rotateY",g=t("li",{key:h,class:["limb",f?"first-li":null],style:{width:this.direction?d:"inherit",height:this.direction?"inherit":v,"background-size":"".concat(c,"px ").concat(l,"px")}},[t("i",{class:["limb-number",this.flipVertical?y:null],style:{color:this.color,left:"".concat(this.direction?m:0,"px"),top:"".concat(this.direction?null:2*m-4,"px")}},[this.limbNumber(p)])]);u.push(g)}return u}},render:function(){var t=arguments[0],e=this.scaleSize/2,n=e>0?e:0,r=(this.max-this.min)/this.ratio,o=r*this.interval+2*n,i=r*this.interval+2*n,s=this.direction?"rotateX(180deg)":"rotateY(180deg)",a=t("li",{class:"placeholder",style:{width:this.direction?"".concat(parseInt(n),"px"):"inherit",height:this.direction?"inherit":"".concat(parseInt(n),"px")}});return t("div",{class:["clown-scale",this.type,this.mask?"clown-scale-mask":null],ref:"scale",style:{transform:this.flipVertical?s:null,width:this.direction?"100%":"60px",height:this.direction?"60px":"100%"}},[this.$slots.standard?this.$slots.standard:t("div",{class:"standard"},[t("span",{class:"standard-line",style:{transform:this.direction?"translateX(".concat(e,"px)"):"translateY(".concat(e,"px)")}})]),t("div",{ref:"scroll",class:"clown-scale-swiper"},[t("ul",{class:"swiper",style:{width:this.direction?"".concat(o,"px"):"inherit",height:this.direction?"inherit":"".concat(i,"px")}},[a,this.scaleList(),a])])])}}},data:function(){return{value:0}},mounted:function(){},methods:{}},o,[],!1,null,null,null);wt.options.__file="App.vue";var kt=wt.exports;new r.a({render:function(t){return t(kt)}}).$mount("#app")}])})); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Document 15 | 22 | 23 | 24 |
    25 | 26 | 27 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: wyj 3 | * @Date: 2019-11-10 20:36:26 4 | * @LastEditors: wyj 5 | * @LastEditTime: 2019-11-19 13:25:26 6 | * @Description: 7 | */ 8 | import Vue from "vue" 9 | import App from "./App.vue" 10 | new Vue({ 11 | render: h => h(App) 12 | }).$mount("#app") 13 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | import App from "./app/index.js" 2 | App.install = Vue => Vue.component(App.name, App) 3 | export default App 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-scale", 3 | "version": "1.0.5", 4 | "description": "基于 better-scroll vue滑动刻度尺,他支持水平,垂直滑动。", 5 | "main": "component/index.js", 6 | "private": false, 7 | "scripts": { 8 | "dev": "webpack-dev-server --progress --config build/webpack.dev.config.js", 9 | "build": "webpack --config build/webpack.prod.config.js", 10 | "demo": "webpack --config build/webpack.demo.config.js" 11 | }, 12 | "keywords": [ 13 | "vue-scale", 14 | "scale", 15 | "dividing rule", 16 | "刻度尺", 17 | "滑动尺" 18 | ], 19 | "author": "clown", 20 | "license": "ISC", 21 | "homepage": "", 22 | "devDependencies": { 23 | "@babel/core": "^7.7.2", 24 | "@babel/preset-env": "^7.7.1", 25 | "babel-loader": "^8.0.6", 26 | "babel-plugin-syntax-jsx": "^6.18.0", 27 | "babel-plugin-transform-vue-jsx": "^3.7.0", 28 | "clean-webpack-plugin": "^3.0.0", 29 | "css-loader": "^3.2.0", 30 | "file-loader": "^5.0.2", 31 | "friendly-errors-webpack-plugin": "^1.7.0", 32 | "html-webpack-plugin": "^3.2.0", 33 | "less": "^3.10.3", 34 | "less-loader": "^5.0.0", 35 | "style-loader": "^1.0.0", 36 | "url-loader": "^2.2.0", 37 | "vue-loader": "^15.7.2", 38 | "vue-template-compiler": "^2.6.10", 39 | "webpack": "^4.41.2", 40 | "webpack-cli": "^3.3.10", 41 | "webpack-dev-server": "^3.9.0", 42 | "webpack-merge": "^4.2.2" 43 | }, 44 | "dependencies": { 45 | "@better-scroll/core": "^2.0.0-beta.2", 46 | "vue": "^2.6.10" 47 | } 48 | } 49 | --------------------------------------------------------------------------------