diff --git a/dist/progress/index.js b/dist/progress/index.js new file mode 100644 index 00000000..9c549924 --- /dev/null +++ b/dist/progress/index.js @@ -0,0 +1,120 @@ +Component({ + options: { + addGlobalClass: true + }, + + externalClasses: [ + 'custom-class' + ], + + properties: { + inactive: { + type: Boolean, + observer() { + this.setPivotStyle(); + this.setPortionStyle(); + } + }, + pivotColor: { + type: String, + observer: 'setPivotStyle' + }, + percentage: { + type: Number, + observer() { + this.setText(); + this.setPortionStyle(); + } + }, + showPivot: { + type: Boolean, + value: true, + observer: 'getWidth' + }, + pivotText: { + type: String, + observer() { + this.setText(); + this.getWidth(); + } + }, + color: { + type: String, + value: '#38f', + observer() { + this.setPivotStyle(); + this.setPortionStyle(); + } + }, + textColor: { + type: String, + value: '#fff', + observer: 'setPivotStyle' + } + }, + + data: { + pivotWidth: 0, + progressWidth: 0 + }, + + ready() { + this.setText(); + this.setPivotStyle(); + this.getWidth(); + }, + + methods: { + getCurrentColor() { + return this.data.inactive ? '#cacaca' : this.data.color; + }, + + setText() { + this.setData({ + text: this.data.pivotText || this.data.percentage + '%' + }); + }, + + setPortionStyle() { + const width = (this.data.progressWidth - this.data.pivotWidth) * this.data.percentage / 100 + 'px'; + const background = this.getCurrentColor(); + this.setData({ + portionStyle: `width: ${width}; background: ${background}; ` + }); + }, + + setPivotStyle() { + const color = this.data.textColor; + const background = this.data.pivotColor || this.getCurrentColor(); + this.setData({ + pivotStyle: `color: ${color}; background: ${background}` + }); + }, + + getRect(selector, callback) { + wx.createSelectorQuery() + .in(this) + .select(selector) + .boundingClientRect(rect => { + rect && callback(rect); + }) + .exec(); + }, + + getWidth() { + this.getRect('.van-progress', rect => { + this.setData({ + progressWidth: rect.width + }); + this.setPortionStyle(); + }); + + this.getRect('.van-progress__pivot', rect => { + this.setData({ + pivotWidth: rect.width || 0 + }); + this.setPortionStyle(); + }); + } + } +}); diff --git a/dist/progress/index.json b/dist/progress/index.json new file mode 100644 index 00000000..467ce294 --- /dev/null +++ b/dist/progress/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} diff --git a/dist/progress/index.wxml b/dist/progress/index.wxml new file mode 100644 index 00000000..0c179c39 --- /dev/null +++ b/dist/progress/index.wxml @@ -0,0 +1,14 @@ + + + + {{ text }} + + + diff --git a/dist/progress/index.wxss b/dist/progress/index.wxss new file mode 100644 index 00000000..ba2c7a64 --- /dev/null +++ b/dist/progress/index.wxss @@ -0,0 +1 @@ +.van-progress{height:4px;position:relative;border-radius:4px;background:#e5e5e5}.van-progress__portion{left:0;height:100%;position:absolute;border-radius:inherit}.van-progress__portion--with-pivot{border-top-right-radius:0;border-bottom-right-radius:0}.van-progress__pivot{top:50%;right:0;min-width:2em;padding:0 5px;font-size:10px;position:absolute;line-height:1.6;text-align:center;border-radius:1em;word-break:keep-all;box-sizing:border-box;background-color:#e5e5e5;-webkit-transform:translate(100%,-50%);transform:translate(100%,-50%)} \ No newline at end of file diff --git a/docs/src/Preview.vue b/docs/src/Preview.vue index ea6ff7fe..c209c306 100644 --- a/docs/src/Preview.vue +++ b/docs/src/Preview.vue @@ -26,8 +26,9 @@ const MAP = { 'nav-bar': 'nav-bar-201808110751.png', 'notice-bar': 'notice-bar-201808092138.png', notify: 'notify-201808112050.png', - popup: 'popup-201808092138.png', panel: 'panel-201808092138.png', + popup: 'popup-201808092138.png', + progress: 'progress-201808232055.png', slider: 'slider-201808221024.png', stepper: 'stepper-201808092138.png', search: 'search-201808092138.png', diff --git a/example/app.json b/example/app.json index 07698cc6..1a349204 100644 --- a/example/app.json +++ b/example/app.json @@ -15,6 +15,7 @@ "pages/notify/index", "pages/panel/index", "pages/popup/index", + "pages/progress/index", "pages/stepper/index", "pages/steps/index", "pages/switch/index", diff --git a/example/config.js b/example/config.js index f6a81107..11f34fa4 100644 --- a/example/config.js +++ b/example/config.js @@ -42,6 +42,10 @@ export default [ path: '/popup', title: 'Popup 弹出层' }, + { + path: '/progress', + title: 'Progress 进度条' + }, { path: '/steps', title: 'Steps 步骤条' diff --git a/example/pages/progress/index.js b/example/pages/progress/index.js new file mode 100644 index 00000000..cc11dfda --- /dev/null +++ b/example/pages/progress/index.js @@ -0,0 +1,3 @@ +import Page from '../../common/page'; + +Page(); diff --git a/example/pages/progress/index.json b/example/pages/progress/index.json new file mode 100644 index 00000000..a47610d0 --- /dev/null +++ b/example/pages/progress/index.json @@ -0,0 +1,7 @@ +{ + "navigationBarTitleText": "Progress 进度条", + "usingComponents": { + "demo-block": "../../components/demo-block/index", + "van-progress": "../../dist/progress/index" + } +} diff --git a/example/pages/progress/index.wxml b/example/pages/progress/index.wxml new file mode 100644 index 00000000..30130b91 --- /dev/null +++ b/example/pages/progress/index.wxml @@ -0,0 +1,19 @@ + + + + + + + + + + + + + diff --git a/example/pages/progress/index.wxss b/example/pages/progress/index.wxss new file mode 100644 index 00000000..c65bf26c --- /dev/null +++ b/example/pages/progress/index.wxss @@ -0,0 +1,3 @@ +.progress { + margin: 5px 15px 20px; +} diff --git a/packages/progress/README.md b/packages/progress/README.md new file mode 100644 index 00000000..4f0673db --- /dev/null +++ b/packages/progress/README.md @@ -0,0 +1,69 @@ +## Progress 进度条 + +### 使用指南 +在 index.json 中引入组件 +```json +"usingComponents": { + "van-progress": "path/to/vant-weapp/dist/progress/index" +} +``` + +### 代码演示 + +#### 基础用法 + +进度条默认为蓝色，使用`percentage`属性来设置当前进度 + +```html + +``` + + +#### 置灰 + +```html + +``` + +#### 样式定制 + +可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色 + +```html + + + + + +``` + +### API + +| 参数 | 说明 | 类型 | 默认值 | +|-----------|-----------|-----------|-------------| +| inactive | 是否置灰 | `Boolean` | `false` | +| percentage | 进度百分比 | `Number` | `false` | +| show-pivot | 是否显示进度文字 | `Boolean` | `true` | +| color | 进度条颜色 | `String` | `#38f` | +| text-color | 进度条文字颜色 | `String` | `#fff` | +| pivot-text | 文字显示 | `String` | 百分比文字 | +| pivot-color | 文字背景色 | `String` | 与进度条颜色一致 | + +### 外部样式类 + +| 类名 | 说明 | +|-----------|-----------| +| custom-class | 根节点样式类 | diff --git a/packages/progress/index.js b/packages/progress/index.js new file mode 100644 index 00000000..9c549924 --- /dev/null +++ b/packages/progress/index.js @@ -0,0 +1,120 @@ +Component({ + options: { + addGlobalClass: true + }, + + externalClasses: [ + 'custom-class' + ], + + properties: { + inactive: { + type: Boolean, + observer() { + this.setPivotStyle(); + this.setPortionStyle(); + } + }, + pivotColor: { + type: String, + observer: 'setPivotStyle' + }, + percentage: { + type: Number, + observer() { + this.setText(); + this.setPortionStyle(); + } + }, + showPivot: { + type: Boolean, + value: true, + observer: 'getWidth' + }, + pivotText: { + type: String, + observer() { + this.setText(); + this.getWidth(); + } + }, + color: { + type: String, + value: '#38f', + observer() { + this.setPivotStyle(); + this.setPortionStyle(); + } + }, + textColor: { + type: String, + value: '#fff', + observer: 'setPivotStyle' + } + }, + + data: { + pivotWidth: 0, + progressWidth: 0 + }, + + ready() { + this.setText(); + this.setPivotStyle(); + this.getWidth(); + }, + + methods: { + getCurrentColor() { + return this.data.inactive ? '#cacaca' : this.data.color; + }, + + setText() { + this.setData({ + text: this.data.pivotText || this.data.percentage + '%' + }); + }, + + setPortionStyle() { + const width = (this.data.progressWidth - this.data.pivotWidth) * this.data.percentage / 100 + 'px'; + const background = this.getCurrentColor(); + this.setData({ + portionStyle: `width: ${width}; background: ${background}; ` + }); + }, + + setPivotStyle() { + const color = this.data.textColor; + const background = this.data.pivotColor || this.getCurrentColor(); + this.setData({ + pivotStyle: `color: ${color}; background: ${background}` + }); + }, + + getRect(selector, callback) { + wx.createSelectorQuery() + .in(this) + .select(selector) + .boundingClientRect(rect => { + rect && callback(rect); + }) + .exec(); + }, + + getWidth() { + this.getRect('.van-progress', rect => { + this.setData({ + progressWidth: rect.width + }); + this.setPortionStyle(); + }); + + this.getRect('.van-progress__pivot', rect => { + this.setData({ + pivotWidth: rect.width || 0 + }); + this.setPortionStyle(); + }); + } + } +}); diff --git a/packages/progress/index.json b/packages/progress/index.json new file mode 100644 index 00000000..467ce294 --- /dev/null +++ b/packages/progress/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} diff --git a/packages/progress/index.pcss b/packages/progress/index.pcss new file mode 100644 index 00000000..aadbef09 --- /dev/null +++ b/packages/progress/index.pcss @@ -0,0 +1,36 @@ +@import '../common/style/var.pcss'; + +.van-progress { + height: 4px; + position: relative; + border-radius: 4px; + background: $gray-light; + + &__portion { + left: 0; + height: 100%; + position: absolute; + border-radius: inherit; + + &--with-pivot { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + + &__pivot { + top: 50%; + right: 0; + min-width: 2em; + padding: 0 5px; + font-size: 10px; + position: absolute; + line-height: 1.6; + text-align: center; + border-radius: 1em; + word-break: keep-all; + box-sizing: border-box; + background-color: $gray-light; + transform: translate(100%, -50%); + } +} diff --git a/packages/progress/index.wxml b/packages/progress/index.wxml new file mode 100644 index 00000000..0c179c39 --- /dev/null +++ b/packages/progress/index.wxml @@ -0,0 +1,14 @@ + + + + {{ text }} + + +