[new feature] add Progress component (#459)

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();
+      });
+    }
+  }
+});

dist/progress/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

dist/progress/index.wxml

@@ -0,0 +1,14 @@
+<view class="van-progress custom-class">
+  <view
+    class="van-progress__portion {{ showPivot && text ? 'van-progress__portion--with-pivot' : '' }}"
+    style="{{ portionStyle }}"
+  >
+    <view
+      v-if="{{ showPivot && text }}"
+      style="{{ pivotStyle }}"
+      class="van-progress__pivot"
+    >
+      {{ text }}
+    </view>
+  </view>
+</view>

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%)}

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',

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",

example/config.js

@@ -42,6 +42,10 @@ export default [
         path: '/popup',
         title: 'Popup 弹出层'
       },
+      {
+        path: '/progress',
+        title: 'Progress 进度条'
+      },
       {
         path: '/steps',
         title: 'Steps 步骤条'

example/pages/progress/index.js

@@ -0,0 +1,3 @@
+import Page from '../../common/page';
+
+Page();

example/pages/progress/index.json

@@ -0,0 +1,7 @@
+{
+  "navigationBarTitleText": "Progress 进度条",
+  "usingComponents": {
+    "demo-block": "../../components/demo-block/index",
+    "van-progress": "../../dist/progress/index"
+  }  
+}

example/pages/progress/index.wxml

@@ -0,0 +1,19 @@
+<demo-block title="基础用法">
+  <van-progress custom-class="progress" percentage="50" />
+</demo-block>
+
+<demo-block title="置灰">
+  <van-progress custom-class="progress" inactive percentage="50" />
+</demo-block>
+
+<demo-block title="样式定制">
+  <van-progress custom-class="progress" pivot-text="橙色" color="#f2826a" percentage="25" />
+  <van-progress custom-class="progress" pivot-text="红色" color="#f3594b" percentage="50" />
+  <van-progress
+    custom-class="progress"
+    percentage="75"
+    pivot-text="紫色"
+    pivot-color="#7232dd"
+    color="linear-gradient(to right, #be99ff, #7232dd)"
+  />
+</demo-block>

example/pages/progress/index.wxss

@@ -0,0 +1,3 @@
+.progress {
+  margin: 5px 15px 20px;
+}

packages/progress/README.md

@@ -0,0 +1,69 @@
+## Progress 进度条
+
+### 使用指南
+在 index.json 中引入组件
+```json
+"usingComponents": {
+  "van-progress": "path/to/vant-weapp/dist/progress/index"
+}
+```
+
+### 代码演示
+
+#### 基础用法
+
+进度条默认为蓝色，使用`percentage`属性来设置当前进度
+
+```html
+<van-progress percentage="50" />
+```
+
+
+#### 置灰
+
+```html
+<van-progress inactive percentage="50" />
+```
+
+#### 样式定制
+
+可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
+
+```html
+<van-progress
+  pivot-text="橙色"
+  color="#f2826a"
+  percentage="25"
+/>
+
+<van-progress
+  pivot-text="红色"
+  color="#f3594b"
+  percentage="50"
+/>
+
+<van-progress
+  percentage="75"
+  pivot-text="紫色"
+  pivot-color="#7232dd"
+  color="linear-gradient(to right, #be99ff, #7232dd)"
+/>
+```
+
+### 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 | 根节点样式类 |

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();
+      });
+    }
+  }
+});

packages/progress/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

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%);
+  }
+}

packages/progress/index.wxml

@@ -0,0 +1,14 @@
+<view class="van-progress custom-class">
+  <view
+    class="van-progress__portion {{ showPivot && text ? 'van-progress__portion--with-pivot' : '' }}"
+    style="{{ portionStyle }}"
+  >
+    <view
+      v-if="{{ showPivot && text }}"
+      style="{{ pivotStyle }}"
+      class="van-progress__pivot"
+    >
+      {{ text }}
+    </view>
+  </view>
+</view>