Merge pull request #90 from chenjiahan/dev

Progress: adjust DOM struct
2025-04-06 03:57:59 +08:00 · 2017-08-24 16:14:43 +08:00 · 2017-08-24 16:14:43 +08:00 · a4de151383
commit a4de151383
parent dbd3512979 c7b96bd8e0
9 changed files with 132 additions and 174 deletions
--- a/docs/examples-docs/progress.md
+++ b/docs/examples-docs/progress.md
@ -1,13 +1,11 @@
 <style>
 .demo-progress {
-  &__wrapper {
-    padding: 5px;
+  .van-progress {
    margin: 20px 10px;
  }
 } 
 </style>

-
 ## Progress 进度条

 ### 使用指南
@ -21,57 +19,37 @@ Vue.component(Progress.name, Progress);

 #### 基础用法

-默认情况进度条为蓝色，使用`percentage`属性来设置当前进度。
+进度条默认为蓝色，使用`percentage`属性来设置当前进度

 :::demo 基础用法
 ```html
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" :percentage="0"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo2" :percentage="46"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" :percentage="100"></van-progress>
-</div>
+<van-progress :percentage="0"></van-progress>
+<van-progress :percentage="46"></van-progress>
+<van-progress :percentage="100"></van-progress>
 ```
 :::


-#### Inactive
+#### 进度条置灰

-是否置灰进度条，一般用于进度条被取消时。
-
-:::demo Inactive
+:::demo 进度条置灰
 ```html
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" inactive :percentage="0"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo2" inactive :percentage="46"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" inactive :percentage="100"></van-progress>
-</div>
+<van-progress inactive :percentage="0"></van-progress>
+<van-progress inactive :percentage="46"></van-progress>
+<van-progress inactive :percentage="100"></van-progress>
 ```
 :::


-#### 自定义颜色和文字
+#### 样式定制

 可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色

-:::demo 自定义颜色和文字
+:::demo 样式定制
 ```html
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
-</div>
-<div class="demo-progress__wrapper">
-  <van-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
-</div>
+<van-progress pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
+<van-progress pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
+<van-progress pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
 ```
 :::

@ -79,9 +57,8 @@ Vue.component(Progress.name, Progress);

 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| inactive | 是否置灰 | `boolean`  | `false`          | `true`, `false`    |
-| percentage | 进度百分比 | `number`  | `false`          | `0-100`    |
-| pivotText | 文字显示 | `string`  | 百分比文字          | -   |
-| color | 进度条颜色 | `string`  | `#38f`    | hexvalue   |
-| textColor | 进度条文字颜色 | `string`  | `#fff`    | hexvalue   |
-
+| inactive | 是否置灰 | `boolean` | `false` | |
+| percentage | 进度百分比 | `number` | `false` | `0-100` |
+| pivotText | 文字显示 | `string` | 百分比文字 | - |
+| color | 进度条颜色 | `string` | `#38f` | hexvalue |
+| textColor | 进度条文字颜色 | `string` | `#fff` | hexvalue |
--- a/docs/src/doc.config.js
+++ b/docs/src/doc.config.js
@ -26,21 +26,21 @@ module.exports = {
                "title": "快速上手",
                noExample: true
              },
+              {
+                "title": "业务组件",
+                "link": "/zanui/captain/component/quickstart"
+              },
              {
                "path": "/changelog",
                "title": "更新日志",
                noExample: true
-              },
-              {
-                "title": "业务组件",
-                "link": "/zanui/captain/component/quickstart"
              }
            ]
          }
        ]
      },
      {
-        "name": "组件列表",
+        "name": "组件",
        "showInMobile": true,
        "groups": [
          {
--- a/docs/src/examples.js
+++ b/docs/src/examples.js
@ -5,6 +5,7 @@ import routes from './router.config';
 import ZanUI from 'packages/index';
 import ZanDoc from 'zan-doc';
 import 'packages/vant-css/src/index.css';
+import 'zan-doc/src/helper/touch-simulator';

 import DemoList from './components/demo-list.vue';

--- a/package.json
+++ b/package.json
@ -66,7 +66,7 @@
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.5",
    "eslint-plugin-vue": "^2.1.0",
-    "extract-text-webpack-plugin": "2.1.2",
+    "extract-text-webpack-plugin": "2.0.0",
    "felint": "^0.5.0-alpha.3",
    "file-loader": "^0.11.2",
    "file-save": "^0.2.0",
@ -108,7 +108,7 @@
    "vue": "^2.4.2",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^13.0.4",
-    "vue-markdown-loader": "^2.0.0",
+    "vue-markdown-loader": "^2.1.0",
    "vue-router": "^2.7.0",
    "vue-sfc-compiler": "^0.0.2",
    "vue-style-loader": "^3.0.0",
@ -116,6 +116,6 @@
    "webpack": "^3.5.5",
    "webpack-dev-server": "^2.7.1",
    "webpack-merge": "^4.1.0",
-    "zan-doc": "^0.2.1"
+    "zan-doc": "^0.2.2"
  }
 }
--- a/packages/progress/index.vue
+++ b/packages/progress/index.vue
@ -1,27 +1,11 @@
 <template>
  <div class="van-progress">
-    <div class="van-progress__bar">
-      <span class="van-progress__bar__finished-portion" :style="{backgroundColor: componentColor, width: percentage + '%'}"></span>
-      <span class="van-progress__bar__pivot" :style="pivotStyle">{{ pivotText }}</span>
-    </div>
+    <span class="van-progress__portion" :style="portionStyle"></span>
+    <span class="van-progress__pivot" :style="pivotStyle">{{ pivotText }}</span>
  </div>
 </template>

 <script>
-/**
- * van-progress
- * @module components/progress
- * @desc 开关
- * @param {boolean} [inactive=false] - 是否置灰
- * @param {number} [percentage=0] - 进度百分比
- * @param {string} [pivotText=percentage] - 进度条显示文字
- * @param {string} [color='#38f'] - 进度条颜色
- * @param {string} [textColor='#fff'] - 进度条文字颜色
- *
- * @example
- * <van-switch checked="true" disabled="false"></van-switch>
- */
-
 const DEFAULT_COLOR = '#38f';
 const DEFAULT_TEXT_COLOR = '#fff';
 const INACTIVE_COLOR = '#cacaca';
@ -33,14 +17,12 @@ export default {
    percentage: {
      type: Number,
      required: true,
-      validator(value) {
-        return value <= 100 && value >= 0;
-      }
+      validator: value => value >= 0 && value <= 100
    },
    inactive: Boolean,
    pivotText: {
      type: String,
-      default: function() {
+      default() {
        return this.percentage + '%';
      }
    },
@ -59,24 +41,19 @@ export default {
      return this.inactive ? INACTIVE_COLOR : this.color;
    },
    pivotStyle() {
-      const pivotStyle = {
-        backgroundColor: this.componentColor,
+      const { percentage } = this;
+      return {
        color: this.textColor,
-        left: this.percentage + '%',
-        marginLeft: '-14px'
+        backgroundColor: this.componentColor,
+        left: percentage <= 5 ? '0%' : percentage >= 95 ? '100%' : percentage + '%',
+        marginLeft: percentage <= 5 ? '0' : percentage >= 95 ? '-28px' : '-14px'
+      };
+    },
+    portionStyle() {
+      return {
+        width: this.percentage + '%',
+        backgroundColor: this.componentColor
      };
-      if (this.percentage <= 5) {
-        pivotStyle.left = '0%';
-        pivotStyle.marginLeft = '0';
-      } else if (this.percentage >= 95) {
-        pivotStyle.left = '100%';
-        pivotStyle.marginLeft = '-28px';
-      } else {
-        pivotStyle.left = this.percentage + '%';
-        pivotStyle.marginLeft = '-14px';
-      }
-
-      return pivotStyle;
    }
  }
 };
--- a/packages/uploader/index.vue
+++ b/packages/uploader/index.vue
@ -1,57 +1,54 @@
 <template>
  <div class="van-uploader">
    <slot></slot>
-    <template v-if="disabled">
-      <input type="file" @change="onValueChange" disabled="disabled" class="van-uploader__input" />
-    </template>
-    <template v-else>
-      <input type="file" @change="onValueChange"  class="van-uploader__input" ref="input" />
-    </template>
+    <input type="file" @change="onValueChange" :disabled="disabled" class="van-uploader__input" ref="input" />
  </div>
 </template>

 <script>
-  export default {
-    name: 'van-uploader',
-    props: {
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      beforeRead: Function,
-      afterRead: Function,
-      resultType: {
-        type: String,
-        default: 'dataUrl',
-        validator(value) {
-          return value === 'dataUrl' || value === 'text';
-        }
-      }
+export default {
+  name: 'van-uploader',
+
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
    },
-    methods: {
-      onValueChange(event) {
-        if (this.disabled) {
-          return;
-        }
-        var files = event.target.files;
-        var file = files[0];
-        if (!file) return;
-        if (this.beforeRead && !this.beforeRead(file)) return;
-        var reader = new FileReader();
-        reader.onload = (e) => {
-          this.afterRead && this.afterRead(
-            {
-              file: file,
-              content: e.target.result
-            });
-          this.$refs.input && (this.$refs.input.value = '');
-        };
-        if (this.resultType === 'dataUrl') {
-          reader.readAsDataURL(file);
-        } else if (this.resultType === 'text') {
-          reader.readAsText(file);
-        }
+    beforeRead: Function,
+    afterRead: Function,
+    resultType: {
+      type: String,
+      default: 'dataUrl',
+      validator: value => value === 'dataUrl' || value === 'text'
+    }
+  },
+
+  methods: {
+    onValueChange(event) {
+      if (this.disabled) {
+        return;
+      }
+
+      const file = event.target.files[0];
+      if (!file || (this.beforeRead && !this.beforeRead(file))) {
+        return;
+      }
+
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        this.afterRead && this.afterRead({
+          file,
+          content: e.target.result
+        });
+        this.$refs.input && (this.$refs.input.value = '');
+      };
+
+      if (this.resultType === 'dataUrl') {
+        reader.readAsDataURL(file);
+      } else if (this.resultType === 'text') {
+        reader.readAsText(file);
      }
    }
-  };
+  }
+};
 </script>
--- a/packages/vant-css/src/progress.css
+++ b/packages/vant-css/src/progress.css
@ -1,32 +1,27 @@
@import './common/var.css';

 .van-progress {
-  &__bar {
-    height: 4px;
-    border-radius: 4.5px;
-    width: 100%;
-    background: $c-gray-light;
-    position: relative;
+  height: 4px;
+  position: relative;
+  border-radius: 4px;
+  background: $c-gray-light;

-    &__finished-portion {
-      border-radius: 4.5px;
-      height: 100%;
-      position: absolute;
-      left: 0;
-      display: inline-block;
-    }
+  &__portion {
+    left: 0;
+    height: 100%;
+    position: absolute;
+    border-radius: 4px;
+  }

-    &__pivot {
-      padding: 2px 0;
-      font-size: 8px;
-      position: absolute;
-      border-radius: 6px;
-      width: 28px;
-      background-color: $c-gray-light;
-      line-height: 8px;
-      text-align: center;
-      top: 50%;
-      transform: translate3d(0, -50%, 0);
-    }
+  &__pivot {
+    top: 50%;
+    width: 28px;
+    font-size: 8px;
+    margin-top: -6px;
+    position: absolute;
+    border-radius: 6px;
+    line-height: 12px;
+    text-align: center;
+    background-color: $c-gray-light;
  }
 }
--- a/test/unit/specs/progress.spec.js
+++ b/test/unit/specs/progress.spec.js
@ -9,8 +9,8 @@ describe('Progress', () => {
    wrapper = mount(Progress, {
      propsData: propsData
    });
-    bar = wrapper.find('.van-progress__bar__finished-portion')[0];
-    pivot = wrapper.find('.van-progress__bar__pivot')[0];
+    bar = wrapper.find('.van-progress__portion')[0];
+    pivot = wrapper.find('.van-progress__pivot')[0];
  };

  afterEach(() => {
--- a/yarn.lock
+++ b/yarn.lock
@ -67,7 +67,7 @@ ajv-keywords@^2.0.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.0.tgz#a296e17f7bfae7c1ce4f7e0de53d29cb32162df0"

-ajv@^4.7.0, ajv@^4.9.1:
+ajv@^4.11.2, ajv@^4.7.0, ajv@^4.9.1:
  version "4.11.8"
  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
  dependencies:
@ -2768,14 +2768,14 @@ extglob@^0.3.1:
  dependencies:
    is-extglob "^1.0.0"

-extract-text-webpack-plugin@2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-2.1.2.tgz#756ef4efa8155c3681833fbc34da53b941746d6c"
+extract-text-webpack-plugin@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/extract-text-webpack-plugin/-/extract-text-webpack-plugin-2.0.0.tgz#8640f72609800a3528f13a2a9634d566a5c1ae60"
  dependencies:
+    ajv "^4.11.2"
    async "^2.1.2"
    loader-utils "^1.0.2"
-    schema-utils "^0.3.0"
-    webpack-sources "^1.0.1"
+    webpack-sources "^0.1.0"

 extract-zip@~1.6.5:
  version "1.6.5"
@ -6816,6 +6816,10 @@ source-list-map@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"

+source-list-map@~0.1.7:
+  version "0.1.8"
+  resolved "https://registry.npmjs.org/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
+
 source-map-support@^0.4.15:
  version "0.4.16"
  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.16.tgz#16fecf98212467d017d586a2af68d628b9421cd8"
@ -7603,9 +7607,9 @@ vue-loader@^13.0.4:
    vue-style-loader "^3.0.0"
    vue-template-es2015-compiler "^1.5.3"

-vue-markdown-loader@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/vue-markdown-loader/-/vue-markdown-loader-2.0.0.tgz#d3cadbf9c8976a81f2d5e39496d505fd4f31bc96"
+vue-markdown-loader@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/vue-markdown-loader/-/vue-markdown-loader-2.1.0.tgz#112d1921dd56daa29906b7c012623c6c5d6e0d8c"
  dependencies:
    cheerio "^0.20.0"
    highlight.js "^9.4.0"
@ -7707,6 +7711,13 @@ webpack-merge@^4.1.0:
  dependencies:
    lodash "^4.17.4"

+webpack-sources@^0.1.0:
+  version "0.1.5"
+  resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-0.1.5.tgz#aa1f3abf0f0d74db7111c40e500b84f966640750"
+  dependencies:
+    source-list-map "~0.1.7"
+    source-map "~0.5.3"
+
 webpack-sources@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.0.1.tgz#c7356436a4d13123be2e2426a05d1dad9cbe65cf"
@ -7926,9 +7937,9 @@ yeast@0.1.2:
  version "0.1.2"
  resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"

-zan-doc@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.1.tgz#34723ea180d0ac2e183b66d2a3e4a04b4f6fe91b"
+zan-doc@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.2.tgz#ebf8ffda5bd3cf9277cc3e59c48476a3fbf84d9f"
  dependencies:
    cheerio "0.22.0"
    decamelize "^1.2.0"