From eecc4bbdaaedb3711fe612a9ba2f6f767992718e Mon Sep 17 00:00:00 2001 From: neverland Date: Wed, 22 Aug 2018 10:32:27 +0800 Subject: [PATCH] [new feature] add slider component (#453) --- dist/actionsheet/index.js | 4 ++ dist/badge-group/index.js | 4 ++ dist/badge/index.js | 4 ++ dist/behaviors/button.js | 57 +++++++++++++++++++ dist/behaviors/touch.js | 22 ++++++++ dist/button/index.js | 8 ++- dist/card/index.js | 3 +- dist/cell-group/index.js | 4 ++ dist/cell/index.js | 3 +- dist/col/index.js | 4 ++ dist/field/index.js | 3 +- dist/icon/index.js | 4 ++ dist/loading/index.js | 4 ++ dist/nav-bar/index.js | 3 +- dist/notice-bar/index.js | 4 ++ dist/notify/index.js | 32 +++-------- dist/overlay/index.js | 4 ++ dist/panel/index.js | 3 +- dist/popup/index.js | 4 ++ dist/row/index.js | 4 ++ dist/search/index.js | 3 +- dist/slider/index.js | 98 +++++++++++++++++++++++++++++++++ dist/slider/index.json | 3 + dist/slider/index.wxml | 11 ++++ dist/slider/index.wxss | 1 + dist/stepper/index.js | 4 ++ dist/steps/index.js | 4 ++ dist/switch/index.js | 4 ++ dist/tabbar-item/index.js | 5 +- dist/tabbar/index.js | 4 ++ dist/tag/index.js | 4 ++ dist/toast/index.js | 4 ++ dist/transition/index.js | 4 ++ dist/tree-select/index.js | 4 ++ docs/src/Preview.vue | 1 + example/app.json | 1 + example/config.js | 4 ++ example/pages/slider/index.js | 10 ++++ example/pages/slider/index.json | 7 +++ example/pages/slider/index.wxml | 27 +++++++++ example/pages/slider/index.wxss | 3 + packages/behaviors/touch.js | 22 ++++++++ packages/button/README.md | 2 +- packages/slider/README.md | 66 ++++++++++++++++++++++ packages/slider/index.js | 98 +++++++++++++++++++++++++++++++++ packages/slider/index.json | 3 + packages/slider/index.pcss | 39 +++++++++++++ packages/slider/index.wxml | 11 ++++ 48 files changed, 588 insertions(+), 37 deletions(-) create mode 100644 dist/behaviors/button.js create mode 100644 dist/behaviors/touch.js create mode 100644 dist/slider/index.js create mode 100644 dist/slider/index.json create mode 100644 dist/slider/index.wxml create mode 100644 dist/slider/index.wxss create mode 100644 example/pages/slider/index.js create mode 100644 example/pages/slider/index.json create mode 100644 example/pages/slider/index.wxml create mode 100644 example/pages/slider/index.wxss create mode 100644 packages/behaviors/touch.js create mode 100644 packages/slider/README.md create mode 100644 packages/slider/index.js create mode 100644 packages/slider/index.json create mode 100644 packages/slider/index.pcss create mode 100644 packages/slider/index.wxml diff --git a/dist/actionsheet/index.js b/dist/actionsheet/index.js index d3f68a79..90092106 100644 --- a/dist/actionsheet/index.js +++ b/dist/actionsheet/index.js @@ -1,4 +1,8 @@ Component({ + options: { + addGlobalClass: true + }, + properties: { show: Boolean, title: String, diff --git a/dist/badge-group/index.js b/dist/badge-group/index.js index 6f9cda68..7fb2f27d 100644 --- a/dist/badge-group/index.js +++ b/dist/badge-group/index.js @@ -1,6 +1,10 @@ const BADGE_PATH = '../badge/index'; Component({ + options: { + addGlobalClass: true + }, + externalClasses: ['custom-class'], relations: { diff --git a/dist/badge/index.js b/dist/badge/index.js index b046203d..4a27209d 100644 --- a/dist/badge/index.js +++ b/dist/badge/index.js @@ -1,6 +1,10 @@ const BADGE_GROUP_PATH = '../badge-group/index'; Component({ + options: { + addGlobalClass: true + }, + externalClasses: ['custom-class'], relations: { diff --git a/dist/behaviors/button.js b/dist/behaviors/button.js new file mode 100644 index 00000000..5473fcf4 --- /dev/null +++ b/dist/behaviors/button.js @@ -0,0 +1,57 @@ +module.exports = Behavior({ + properties: { + loading: Boolean, + // 在自定义组件中，无法与外界的 form 组件联动，暂时不开放 + // formType: String, + openType: String, + appParameter: String, + // 暂时不开放，直接传入无法设置样式 + // hoverClass: { + // type: String, + // value: 'button-hover' + // }, + hoverStopPropagation: Boolean, + hoverStartTime: { + type: Number, + value: 20 + }, + hoverStayTime: { + type: Number, + value: 70 + }, + lang: { + type: String, + value: 'en' + }, + sessionFrom: { + type: String, + value: '' + }, + sendMessageTitle: String, + sendMessagePath: String, + sendMessageImg: String, + showMessageCard: String + }, + + methods: { + bindgetuserinfo(event = {}) { + this.triggerEvent('getuserinfo', event.detail || {}); + }, + + bindcontact(event = {}) { + this.triggerEvent('contact', event.detail || {}); + }, + + bindgetphonenumber(event = {}) { + this.triggerEvent('getphonenumber', event.detail || {}); + }, + + bindopensetting(event = {}) { + this.triggerEvent('opensetting', event.detail || {}); + }, + + binderror(event = {}) { + this.triggerEvent('error', event.detail || {}); + } + } +}); diff --git a/dist/behaviors/touch.js b/dist/behaviors/touch.js new file mode 100644 index 00000000..729db5a2 --- /dev/null +++ b/dist/behaviors/touch.js @@ -0,0 +1,22 @@ +module.exports = Behavior({ + methods: { + touchStart(event) { + this.direction = ''; + this.deltaX = 0; + this.deltaY = 0; + this.offsetX = 0; + this.offsetY = 0; + this.startX = event.touches[0].clientX; + this.startY = event.touches[0].clientY; + }, + + touchMove(event) { + const touch = event.touches[0]; + this.deltaX = touch.clientX - this.startX; + this.deltaY = touch.clientY - this.startY; + this.offsetX = Math.abs(this.deltaX); + this.offsetY = Math.abs(this.deltaY); + this.direction = this.offsetX > this.offsetY ? 'horizontal' : this.offsetX < this.offsetY ? 'vertical' : ''; + } + } +}); diff --git a/dist/button/index.js b/dist/button/index.js index 5bbc0e18..9f1f18c8 100644 --- a/dist/button/index.js +++ b/dist/button/index.js @@ -1,4 +1,4 @@ -const nativeBehaviors = require('./behaviors'); +const buttonBehaviors = require('../behaviors/button'); const classnames = require('../common/classnames'); const observer = function() { @@ -6,9 +6,13 @@ const observer = function() { }; Component({ + options: { + addGlobalClass: true + }, + externalClasses: ['custom-class', 'loading-class'], - behaviors: [nativeBehaviors], + behaviors: [buttonBehaviors], properties: { type: { diff --git a/dist/card/index.js b/dist/card/index.js index 791ddbf3..dc1d9964 100644 --- a/dist/card/index.js +++ b/dist/card/index.js @@ -1,6 +1,7 @@ Component({ options: { - multipleSlots: true + multipleSlots: true, + addGlobalClass: true }, externalClasses: [ diff --git a/dist/cell-group/index.js b/dist/cell-group/index.js index 7c0cbd4b..61e9f502 100644 --- a/dist/cell-group/index.js +++ b/dist/cell-group/index.js @@ -1,4 +1,8 @@ Component({ + options: { + addGlobalClass: true + }, + externalClasses: ['custom-class'], properties: { diff --git a/dist/cell/index.js b/dist/cell/index.js index 41455190..bbeb0271 100644 --- a/dist/cell/index.js +++ b/dist/cell/index.js @@ -9,7 +9,8 @@ Component({ ], options: { - multipleSlots: true + multipleSlots: true, + addGlobalClass: true }, properties: { diff --git a/dist/col/index.js b/dist/col/index.js index 956f5dc7..49b84ad5 100644 --- a/dist/col/index.js +++ b/dist/col/index.js @@ -1,6 +1,10 @@ const ROW_PATH = '../row/index'; Component({ + options: { + addGlobalClass: true + }, + externalClasses: ['custom-class'], relations: { diff --git a/dist/field/index.js b/dist/field/index.js index 796873f5..f07713d2 100644 --- a/dist/field/index.js +++ b/dist/field/index.js @@ -6,7 +6,8 @@ Component({ ], options: { - multipleSlots: true + multipleSlots: true, + addGlobalClass: true }, properties: { diff --git a/dist/icon/index.js b/dist/icon/index.js index 8f2e645c..ea9e0f76 100644 --- a/dist/icon/index.js +++ b/dist/icon/index.js @@ -1,4 +1,8 @@ Component({ + options: { + addGlobalClass: true + }, + externalClasses: ['custom-class'], properties: { diff --git a/dist/loading/index.js b/dist/loading/index.js index 5ab0a49a..85edb5ec 100644 --- a/dist/loading/index.js +++ b/dist/loading/index.js @@ -1,4 +1,8 @@ Component({ + options: { + addGlobalClass: true + }, + externalClasses: ['custom-class'], properties: { diff --git a/dist/nav-bar/index.js b/dist/nav-bar/index.js index 45212d21..72ed2a16 100644 --- a/dist/nav-bar/index.js +++ b/dist/nav-bar/index.js @@ -5,7 +5,8 @@ Component({ ], options: { - multipleSlots: true + multipleSlots: true, + addGlobalClass: true }, properties: { diff --git a/dist/notice-bar/index.js b/dist/notice-bar/index.js index c30faf36..2666c75c 100644 --- a/dist/notice-bar/index.js +++ b/dist/notice-bar/index.js @@ -3,6 +3,10 @@ const FONT_COLOR = '#f60'; const BG_COLOR = '#fff7cc'; Component({ + options: { + addGlobalClass: true + }, + externalClasses: ['custom-class'], properties: { diff --git a/dist/notify/index.js b/dist/notify/index.js index 849cbf97..bb7ae070 100644 --- a/dist/notify/index.js +++ b/dist/notify/index.js @@ -1,4 +1,10 @@ +import Notify from './notify'; + Component({ + options: { + addGlobalClass: true + }, + properties: { text: String, color: { @@ -40,28 +46,4 @@ Component({ } }); -const defaultOptions = { - selector: '#van-notify', - duration: 3000 -}; - -export default function Notify(options = {}) { - const pages = getCurrentPages(); - const ctx = pages[pages.length - 1]; - - options = Object.assign({}, defaultOptions, parseParam(options)); - - const el = ctx.selectComponent(options.selector); - delete options.selector; - - if (el) { - el.setData({ - ...options - }); - el.show(); - } -} - -function parseParam(params = '') { - return typeof params === 'object' ? params : { text: params }; -} +export default Notify; diff --git a/dist/overlay/index.js b/dist/overlay/index.js index 67f32cfc..94506d95 100644 --- a/dist/overlay/index.js +++ b/dist/overlay/index.js @@ -1,4 +1,8 @@ Component({ + options: { + addGlobalClass: true + }, + properties: { show: Boolean, mask: Boolean, diff --git a/dist/panel/index.js b/dist/panel/index.js index 7d77342c..ec38b3de 100644 --- a/dist/panel/index.js +++ b/dist/panel/index.js @@ -5,7 +5,8 @@ Component({ ], options: { - multipleSlots: true + multipleSlots: true, + addGlobalClass: true }, properties: { diff --git a/dist/popup/index.js b/dist/popup/index.js index 9001d6d3..047ea7ef 100644 --- a/dist/popup/index.js +++ b/dist/popup/index.js @@ -1,4 +1,8 @@ Component({ + options: { + addGlobalClass: true + }, + externalClasses: [ 'custom-class', 'overlay-class' diff --git a/dist/row/index.js b/dist/row/index.js index 93a7345b..261b3fac 100644 --- a/dist/row/index.js +++ b/dist/row/index.js @@ -1,6 +1,10 @@ const COL_PATH = '../col/index'; Component({ + options: { + addGlobalClass: true + }, + externalClasses: ['custom-class'], relations: { diff --git a/dist/search/index.js b/dist/search/index.js index 7f051545..4c68acc8 100644 --- a/dist/search/index.js +++ b/dist/search/index.js @@ -2,7 +2,8 @@ Component({ externalClasses: ['custom-class', 'cancel-class'], options: { - multipleSlots: true + multipleSlots: true, + addGlobalClass: true }, properties: { diff --git a/dist/slider/index.js b/dist/slider/index.js new file mode 100644 index 00000000..ee3f3e9f --- /dev/null +++ b/dist/slider/index.js @@ -0,0 +1,98 @@ +const touchBehaviors = require('../behaviors/touch'); + +Component({ + options: { + addGlobalClass: true + }, + + externalClasses: ['custom-class'], + + behaviors: [touchBehaviors], + + properties: { + disabled: Boolean, + max: { + type: Number, + value: 100 + }, + min: { + type: Number, + value: 0 + }, + step: { + type: Number, + value: 1 + }, + value: { + type: Number, + value: 0 + }, + barHeight: { + type: String, + value: '2px' + } + }, + + attached() { + this.updateValue(this.data.value); + }, + + methods: { + getRect(callback) { + wx.createSelectorQuery() + .in(this) + .select('.van-slider') + .boundingClientRect(callback) + .exec(); + }, + + onTouchStart(event) { + if (this.data.disabled) return; + + this.touchStart(event); + this.startValue = this.format(this.data.value); + }, + + onTouchMove(event) { + if (this.data.disabled) return; + + this.touchMove(event); + this.getRect(rect => { + const diff = this.deltaX / rect.width * 100; + this.updateValue(this.startValue + diff); + }); + }, + + onTouchEnd() { + if (this.data.disabled) return; + this.updateValue(this.data.value, true); + }, + + onClick(event) { + if (this.data.disabled) return; + + this.getRect(rect => { + const value = (event.detail.x - rect.left) / rect.width * 100; + this.updateValue(value, true); + }); + }, + + updateValue(value, end) { + value = this.format(value); + + this.setData({ + value, + barStyle: `width: ${value}%; height: ${this.data.barHeight};` + }); + + if (end) { + this.triggerEvent('change', value); + } + }, + + format(value) { + const { max, min, step } = this.data; + return Math.round(Math.max(min, Math.min(value, max)) / step) * step; + } + } +}); diff --git a/dist/slider/index.json b/dist/slider/index.json new file mode 100644 index 00000000..467ce294 --- /dev/null +++ b/dist/slider/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} diff --git a/dist/slider/index.wxml b/dist/slider/index.wxml new file mode 100644 index 00000000..24b073bd --- /dev/null +++ b/dist/slider/index.wxml @@ -0,0 +1,11 @@ + + + + + diff --git a/dist/slider/index.wxss b/dist/slider/index.wxss new file mode 100644 index 00000000..ec24f0b9 --- /dev/null +++ b/dist/slider/index.wxss @@ -0,0 +1 @@ +.van-slider{position:relative;border-radius:999px;background-color:#e5e5e5}.van-slider__bar{position:relative;border-radius:inherit;background-color:#38f}.van-slider__button{position:absolute;top:50%;right:0;width:20px;height:20px;border-radius:50%;background-color:#fff;-webkit-transform:translate3d(50%,-50%,0);transform:translate3d(50%,-50%,0);box-shadow:0 1px 2px rgba(0,0,0,.5)}.van-slider__button::after{content:'';position:absolute;width:200%;height:200%;top:-50%;left:-50%}.van-slider--disabled{opacity:.3} \ No newline at end of file diff --git a/dist/stepper/index.js b/dist/stepper/index.js index cacdb9d8..db85d79b 100644 --- a/dist/stepper/index.js +++ b/dist/stepper/index.js @@ -3,6 +3,10 @@ const MAX = 2147483647; Component({ + options: { + addGlobalClass: true + }, + externalClasses: [ 'custom-class', 'input-class', diff --git a/dist/steps/index.js b/dist/steps/index.js index 9d5c16c7..e07415ca 100644 --- a/dist/steps/index.js +++ b/dist/steps/index.js @@ -1,4 +1,8 @@ Component({ + options: { + addGlobalClass: true + }, + externalClasses: [ 'custom-class' ], diff --git a/dist/switch/index.js b/dist/switch/index.js index b965b6cb..062298a6 100644 --- a/dist/switch/index.js +++ b/dist/switch/index.js @@ -1,4 +1,8 @@ Component({ + options: { + addGlobalClass: true + }, + externalClasses: ['custom-class', 'node-class'], properties: { diff --git a/dist/tabbar-item/index.js b/dist/tabbar-item/index.js index da38910c..a888b510 100644 --- a/dist/tabbar-item/index.js +++ b/dist/tabbar-item/index.js @@ -1,8 +1,6 @@ const TABBAR_PATH = '../tabbar/index'; Component({ - name: 'tabbar-item', - properties: { info: null, icon: String, @@ -10,7 +8,8 @@ Component({ }, options: { - multipleSlots: true + multipleSlots: true, + addGlobalClass: true }, relations: { diff --git a/dist/tabbar/index.js b/dist/tabbar/index.js index c22d01be..a19c784a 100644 --- a/dist/tabbar/index.js +++ b/dist/tabbar/index.js @@ -1,6 +1,10 @@ const ITEM_PATH = '../tabbar-item/index'; Component({ + options: { + addGlobalClass: true + }, + externalClasses: ['custom-class'], properties: { diff --git a/dist/tag/index.js b/dist/tag/index.js index 7a9299d1..f415cfac 100644 --- a/dist/tag/index.js +++ b/dist/tag/index.js @@ -1,4 +1,8 @@ Component({ + options: { + addGlobalClass: true + }, + externalClasses: ['custom-class'], properties: { diff --git a/dist/toast/index.js b/dist/toast/index.js index a64e1306..fa0adba4 100644 --- a/dist/toast/index.js +++ b/dist/toast/index.js @@ -1,6 +1,10 @@ import Toast from './toast'; Component({ + options: { + addGlobalClass: true + }, + properties: { show: Boolean, mask: Boolean, diff --git a/dist/transition/index.js b/dist/transition/index.js index 51cb5ade..ad6fc717 100644 --- a/dist/transition/index.js +++ b/dist/transition/index.js @@ -1,4 +1,8 @@ Component({ + options: { + addGlobalClass: true + }, + externalClasses: ['custom-class'], properties: { diff --git a/dist/tree-select/index.js b/dist/tree-select/index.js index 4362686b..099c5e7e 100644 --- a/dist/tree-select/index.js +++ b/dist/tree-select/index.js @@ -1,6 +1,10 @@ const ITEM_HEIGHT = 44; Component({ + options: { + addGlobalClass: true + }, + properties: { items: { type: Array, diff --git a/docs/src/Preview.vue b/docs/src/Preview.vue index 2ffede79..42a2e58e 100644 --- a/docs/src/Preview.vue +++ b/docs/src/Preview.vue @@ -28,6 +28,7 @@ const MAP = { notify: 'notify-201808112050.png', popup: 'popup-201808092138.png', panel: 'panel-201808092138.png', + slider: 'slider-201808221024.png', stepper: 'stepper-201808092138.png', search: 'search-201808092138.png', steps: 'steps-201808092138.png', diff --git a/example/app.json b/example/app.json index 5f165785..69108798 100644 --- a/example/app.json +++ b/example/app.json @@ -19,6 +19,7 @@ "pages/steps/index", "pages/switch/index", "pages/search/index", + "pages/slider/index", "pages/tag/index", "pages/toast/index", "pages/tabbar/index", diff --git a/example/config.js b/example/config.js index 9417192c..ed50bc7a 100644 --- a/example/config.js +++ b/example/config.js @@ -71,6 +71,10 @@ export default [ path: '/search', title: 'Search 搜索' }, + { + path: '/slider', + title: 'Slider 滑块' + }, { path: '/stepper', title: 'Stepper 步进器' diff --git a/example/pages/slider/index.js b/example/pages/slider/index.js new file mode 100644 index 00000000..e49cdb3d --- /dev/null +++ b/example/pages/slider/index.js @@ -0,0 +1,10 @@ +import Page from '../../common/page'; + +Page({ + onChange(event) { + wx.showToast({ + icon: 'none', + title: `当前值：${event.detail}` + }); + } +}); diff --git a/example/pages/slider/index.json b/example/pages/slider/index.json new file mode 100644 index 00000000..df7376ec --- /dev/null +++ b/example/pages/slider/index.json @@ -0,0 +1,7 @@ +{ + "navigationBarTitleText": "Slider 滑块", + "usingComponents": { + "demo-block": "../../components/demo-block/index", + "van-slider": "../../dist/slider/index" + } +} diff --git a/example/pages/slider/index.wxml b/example/pages/slider/index.wxml new file mode 100644 index 00000000..af35de55 --- /dev/null +++ b/example/pages/slider/index.wxml @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + diff --git a/example/pages/slider/index.wxss b/example/pages/slider/index.wxss new file mode 100644 index 00000000..fe4bbc38 --- /dev/null +++ b/example/pages/slider/index.wxss @@ -0,0 +1,3 @@ +.slider { + margin: 0 15px 30px; +} \ No newline at end of file diff --git a/packages/behaviors/touch.js b/packages/behaviors/touch.js new file mode 100644 index 00000000..729db5a2 --- /dev/null +++ b/packages/behaviors/touch.js @@ -0,0 +1,22 @@ +module.exports = Behavior({ + methods: { + touchStart(event) { + this.direction = ''; + this.deltaX = 0; + this.deltaY = 0; + this.offsetX = 0; + this.offsetY = 0; + this.startX = event.touches[0].clientX; + this.startY = event.touches[0].clientY; + }, + + touchMove(event) { + const touch = event.touches[0]; + this.deltaX = touch.clientX - this.startX; + this.deltaY = touch.clientY - this.startY; + this.offsetX = Math.abs(this.deltaX); + this.offsetY = Math.abs(this.deltaY); + this.direction = this.offsetX > this.offsetY ? 'horizontal' : this.offsetX < this.offsetY ? 'vertical' : ''; + } + } +}); diff --git a/packages/button/README.md b/packages/button/README.md index b9449ecf..556b2deb 100644 --- a/packages/button/README.md +++ b/packages/button/README.md @@ -80,7 +80,7 @@ | 事件名 | 说明 | 参数 | |-----------|-----------|-----------| | bind:click | 点击按钮且按钮状态不为加载或禁用时触发 | - | -| bind:getuserinfo | 用户点击该按钮时，会返回获取到的用户信息，从返回参数的 detail 中获取到的值同 wx.getUserInfo | - | +| bind:getuserinfo | 用户点击该按钮时，会返回获取到的用户信息，
从返回参数的 detail 中获取到的值同 wx.getUserInfo | - | | bind:contact | 客服消息回调 | - | | bind:getphonenumber | 获取用户手机号回调 | - | | bind:error | 当使用开放能力时，发生错误的回调 | - | diff --git a/packages/slider/README.md b/packages/slider/README.md new file mode 100644 index 00000000..42d42d72 --- /dev/null +++ b/packages/slider/README.md @@ -0,0 +1,66 @@ +## Slider 滑块 + +### 使用指南 +在 index.json 中引入组件 +```json +"usingComponents": { + "van-slider": "/packages/slider/index" +} +``` +#### 基本用法 + +```html + +``` + +```js +Page({ + onChange(event) { + wx.showToast({ + icon: 'none', + title: `当前值：${event.detail}` + }); + } +}); +``` + +#### 指定选择范围 + +```html + +``` + +#### 禁用 + +```html + +``` + +#### 指定步长 + +```html + +``` + +### API + +| 参数 | 说明 | 类型 | 默认值 | +|-----------|-----------|-----------|-------------| +| value | 当前进度百分比，取值范围为 0-100 | `Number` | `0` | +| disabled | 是否禁用滑块 | `Boolean` | `false` | +| max | 最大值 | `Number` | `100` | +| min | 最小值 | `Number` | `0` | +| step | 步长 | `Number` | `1` | +| bar-height | 进度条高度 | `String` | `2px` | + +### Event + +| 事件名 | 说明 | 参数 | +|-----------|-----------|-----------| +| bind:change | 进度值改变后触发 | event.detail: 当前进度 | + +### 外部样式类 + +| 类名 | 说明 | +|-----------|-----------| +| custom-class | 根节点样式类 | diff --git a/packages/slider/index.js b/packages/slider/index.js new file mode 100644 index 00000000..ee3f3e9f --- /dev/null +++ b/packages/slider/index.js @@ -0,0 +1,98 @@ +const touchBehaviors = require('../behaviors/touch'); + +Component({ + options: { + addGlobalClass: true + }, + + externalClasses: ['custom-class'], + + behaviors: [touchBehaviors], + + properties: { + disabled: Boolean, + max: { + type: Number, + value: 100 + }, + min: { + type: Number, + value: 0 + }, + step: { + type: Number, + value: 1 + }, + value: { + type: Number, + value: 0 + }, + barHeight: { + type: String, + value: '2px' + } + }, + + attached() { + this.updateValue(this.data.value); + }, + + methods: { + getRect(callback) { + wx.createSelectorQuery() + .in(this) + .select('.van-slider') + .boundingClientRect(callback) + .exec(); + }, + + onTouchStart(event) { + if (this.data.disabled) return; + + this.touchStart(event); + this.startValue = this.format(this.data.value); + }, + + onTouchMove(event) { + if (this.data.disabled) return; + + this.touchMove(event); + this.getRect(rect => { + const diff = this.deltaX / rect.width * 100; + this.updateValue(this.startValue + diff); + }); + }, + + onTouchEnd() { + if (this.data.disabled) return; + this.updateValue(this.data.value, true); + }, + + onClick(event) { + if (this.data.disabled) return; + + this.getRect(rect => { + const value = (event.detail.x - rect.left) / rect.width * 100; + this.updateValue(value, true); + }); + }, + + updateValue(value, end) { + value = this.format(value); + + this.setData({ + value, + barStyle: `width: ${value}%; height: ${this.data.barHeight};` + }); + + if (end) { + this.triggerEvent('change', value); + } + }, + + format(value) { + const { max, min, step } = this.data; + return Math.round(Math.max(min, Math.min(value, max)) / step) * step; + } + } +}); diff --git a/packages/slider/index.json b/packages/slider/index.json new file mode 100644 index 00000000..467ce294 --- /dev/null +++ b/packages/slider/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} diff --git a/packages/slider/index.pcss b/packages/slider/index.pcss new file mode 100644 index 00000000..85203a66 --- /dev/null +++ b/packages/slider/index.pcss @@ -0,0 +1,39 @@ +@import '../common/style/var.pcss'; + +.van-slider { + position: relative; + border-radius: 999px; + background-color: $gray-light; + + &__bar { + position: relative; + border-radius: inherit; + background-color: $blue; + } + + &__button { + position: absolute; + top: 50%; + right: 0; + width: 20px; + height: 20px; + border-radius: 50%; + background-color: $white; + transform: translate3d(50%, -50%, 0); + box-shadow: 0 1px 2px rgba(0, 0, 0, .5); + + /* use pseudo element to expand touch area */ + &::after { + content: ''; + position: absolute; + width: 200%; + height: 200%; + top: -50%; + left: -50%; + } + } + + &--disabled { + opacity: .3; + } +} diff --git a/packages/slider/index.wxml b/packages/slider/index.wxml new file mode 100644 index 00000000..24b073bd --- /dev/null +++ b/packages/slider/index.wxml @@ -0,0 +1,11 @@ + + + + +