├── .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 |
9 |
10 |
11 |
12 |
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="";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 |
--------------------------------------------------------------------------------