diff --git a/docs/examples-docs/progress.md b/docs/examples-docs/progress.md index efb9a2993..917183190 100644 --- a/docs/examples-docs/progress.md +++ b/docs/examples-docs/progress.md @@ -1,13 +1,11 @@ - ## Progress 进度条 ### 使用指南 @@ -21,57 +19,37 @@ Vue.component(Progress.name, Progress); #### 基础用法 -默认情况进度条为蓝色,使用`percentage`属性来设置当前进度。 +进度条默认为蓝色,使用`percentage`属性来设置当前进度 :::demo 基础用法 ```html -
- -
-
- -
-
- -
+ + + ``` ::: -#### Inactive +#### 进度条置灰 -是否置灰进度条,一般用于进度条被取消时。 - -:::demo Inactive +:::demo 进度条置灰 ```html -
- -
-
- -
-
- -
+ + + ``` ::: -#### 自定义颜色和文字 +#### 样式定制 可以使用`pivot-text`属性自定义文字,`color`属性自定义进度条颜色 -:::demo 自定义颜色和文字 +:::demo 样式定制 ```html -
- -
-
- -
-
- -
+ + + ``` ::: @@ -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 | diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js index 110f0cadb..655038e57 100644 --- 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": [ { diff --git a/docs/src/examples.js b/docs/src/examples.js index 73f943ae6..5126b64c3 100644 --- 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'; diff --git a/package.json b/package.json index 706d14a9f..f51ff75c3 100644 --- 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" } } diff --git a/packages/progress/index.vue b/packages/progress/index.vue index 4e89cfd58..685a46135 100644 --- a/packages/progress/index.vue +++ b/packages/progress/index.vue @@ -1,27 +1,11 @@ diff --git a/packages/vant-css/src/progress.css b/packages/vant-css/src/progress.css index a087660fb..645d7db64 100644 --- 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; } } diff --git a/test/unit/specs/progress.spec.js b/test/unit/specs/progress.spec.js index 69b6cf763..d70226746 100644 --- 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(() => { diff --git a/yarn.lock b/yarn.lock index f546eae28..28f96953e 100644 --- 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"