blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

Merge pull request #90 from chenjiahan/dev

Browse Source 
Progress: adjust DOM struct
This commit is contained in:
neverland 2017-08-24 16:14:43 +08:00 committed by GitHub
commit a4de151383
9 changed files with 132 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
docs/examples-docs/progress.md
View File

@ -1,13 +1,11 @@
<style> <style>
.demo-progress { .demo-progress {
&__wrapper { .van-progress {
padding: 5px;
margin: 20px 10px; margin: 20px 10px;
} }
} }
</style> </style>
## Progress 进度条 ## Progress 进度条
### 使用指南 ### 使用指南
@ -21,57 +19,37 @@ Vue.component(Progress.name, Progress);
#### 基础用法 #### 基础用法
默认情况进度条为蓝色，使用`percentage`属性来设置当前进度。 进度条默认为蓝色，使用`percentage`属性来设置当前进度
:::demo 基础用法 :::demo 基础用法
```html ```html
<div class="demo-progress__wrapper"> <van-progress :percentage="0"></van-progress>
<van-progress class="demo-progress__demo1" :percentage="0"></van-progress> <van-progress :percentage="46"></van-progress>
</div> <van-progress :percentage="100"></van-progress>
<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>
``` ```
::: :::
#### Inactive #### 进度条置灰
是否置灰进度条，一般用于进度条被取消时。 :::demo 进度条置灰
:::demo Inactive
```html ```html
<div class="demo-progress__wrapper"> <van-progress inactive :percentage="0"></van-progress>
<van-progress class="demo-progress__demo1" inactive :percentage="0"></van-progress> <van-progress inactive :percentage="46"></van-progress>
</div> <van-progress inactive :percentage="100"></van-progress>
<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>
``` ```
::: :::
#### 自定义颜色和文字 #### 样式定制
可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色 可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
:::demo 自定义颜色和文字 :::demo 样式定制
```html ```html
<div class="demo-progress__wrapper"> <van-progress pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
<van-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></van-progress> <van-progress pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
</div> <van-progress pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
<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>
``` ```
::: :::
@ -79,9 +57,8 @@ Vue.component(Progress.name, Progress);
| 参数 | 说明 | 类型 | 默认值 | 可选值 | | 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| inactive | 是否置灰 | `boolean` | `false` | `true`, `false` | | inactive | 是否置灰 | `boolean` | `false` | |
| percentage | 进度百分比 | `number` | `false` | `0-100` | | percentage | 进度百分比 | `number` | `false` | `0-100` |
| pivotText | 文字显示 | `string` | 百分比文字 | - | | pivotText | 文字显示 | `string` | 百分比文字 | - |
| color | 进度条颜色 | `string` | `#38f` | hexvalue | | color | 进度条颜色 | `string` | `#38f` | hexvalue |
| textColor | 进度条文字颜色 | `string` | `#fff` | hexvalue | | textColor | 进度条文字颜色 | `string` | `#fff` | hexvalue |

10
docs/src/doc.config.js
View File

@ -26,21 +26,21 @@ module.exports = {
"title": "快速上手", "title": "快速上手",
noExample: true noExample: true
}, },
{
"title": "业务组件",
"link": "/zanui/captain/component/quickstart"
},
{ {
"path": "/changelog", "path": "/changelog",
"title": "更新日志", "title": "更新日志",
noExample: true noExample: true
},
{
"title": "业务组件",
"link": "/zanui/captain/component/quickstart"
} }
] ]
} }
] ]
}, },
{ {
"name": "组件列表", "name": "组件",
"showInMobile": true, "showInMobile": true,
"groups": [ "groups": [
{ {

1
docs/src/examples.js
View File

@ -5,6 +5,7 @@ import routes from './router.config';
import ZanUI from 'packages/index'; import ZanUI from 'packages/index';
import ZanDoc from 'zan-doc'; import ZanDoc from 'zan-doc';
import 'packages/vant-css/src/index.css'; import 'packages/vant-css/src/index.css';
import 'zan-doc/src/helper/touch-simulator';
import DemoList from './components/demo-list.vue'; import DemoList from './components/demo-list.vue';

6
package.json
View File

@ -66,7 +66,7 @@
"cross-env": "^5.0.5", "cross-env": "^5.0.5",
"css-loader": "^0.28.5", "css-loader": "^0.28.5",
"eslint-plugin-vue": "^2.1.0", "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", "felint": "^0.5.0-alpha.3",
"file-loader": "^0.11.2", "file-loader": "^0.11.2",
"file-save": "^0.2.0", "file-save": "^0.2.0",
@ -108,7 +108,7 @@
"vue": "^2.4.2", "vue": "^2.4.2",
"vue-html-loader": "^1.2.4", "vue-html-loader": "^1.2.4",
"vue-loader": "^13.0.4", "vue-loader": "^13.0.4",
"vue-markdown-loader": "^2.0.0", "vue-markdown-loader": "^2.1.0",
"vue-router": "^2.7.0", "vue-router": "^2.7.0",
"vue-sfc-compiler": "^0.0.2", "vue-sfc-compiler": "^0.0.2",
"vue-style-loader": "^3.0.0", "vue-style-loader": "^3.0.0",
@ -116,6 +116,6 @@
"webpack": "^3.5.5", "webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1", "webpack-dev-server": "^2.7.1",
"webpack-merge": "^4.1.0", "webpack-merge": "^4.1.0",
"zan-doc": "^0.2.1" "zan-doc": "^0.2.2"
} }
} }

53
packages/progress/index.vue
View File

@ -1,27 +1,11 @@
<template> <template>
<div class="van-progress"> <div class="van-progress">
<div class="van-progress__bar"> <span class="van-progress__portion" :style="portionStyle"></span>
<span class="van-progress__bar__finished-portion" :style="{backgroundColor: componentColor, width: percentage + '%'}"></span> <span class="van-progress__pivot" :style="pivotStyle">{{ pivotText }}</span>
<span class="van-progress__bar__pivot" :style="pivotStyle">{{ pivotText }}</span>
</div>
</div> </div>
</template> </template>
<script> <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_COLOR = '#38f';
const DEFAULT_TEXT_COLOR = '#fff'; const DEFAULT_TEXT_COLOR = '#fff';
const INACTIVE_COLOR = '#cacaca'; const INACTIVE_COLOR = '#cacaca';
@ -33,14 +17,12 @@ export default {
percentage: { percentage: {
type: Number, type: Number,
required: true, required: true,
validator(value) { validator: value => value >= 0 && value <= 100
return value <= 100 && value >= 0;
}
}, },
inactive: Boolean, inactive: Boolean,
pivotText: { pivotText: {
type: String, type: String,
default: function() { default() {
return this.percentage + '%'; return this.percentage + '%';
} }
}, },
@ -59,24 +41,19 @@ export default {
return this.inactive ? INACTIVE_COLOR : this.color; return this.inactive ? INACTIVE_COLOR : this.color;
}, },
pivotStyle() { pivotStyle() {
const pivotStyle = { const { percentage } = this;
backgroundColor: this.componentColor, return {
color: this.textColor, color: this.textColor,
left: this.percentage + '%', backgroundColor: this.componentColor,
marginLeft: '-14px' 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;
} }
} }
}; };

31
packages/uploader/index.vue
View File

@ -1,18 +1,14 @@
<template> <template>
<div class="van-uploader"> <div class="van-uploader">
<slot></slot> <slot></slot>
<template v-if="disabled"> <input type="file" @change="onValueChange" :disabled="disabled" class="van-uploader__input" ref="input" />
<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>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'van-uploader', name: 'van-uploader',
props: { props: {
disabled: { disabled: {
type: Boolean, type: Boolean,
@ -23,29 +19,30 @@
resultType: { resultType: {
type: String, type: String,
default: 'dataUrl', default: 'dataUrl',
validator(value) { validator: value => value === 'dataUrl' || value === 'text'
return value === 'dataUrl' || value === 'text';
}
} }
}, },
methods: { methods: {
onValueChange(event) { onValueChange(event) {
if (this.disabled) { if (this.disabled) {
return; return;
} }
var files = event.target.files;
var file = files[0]; const file = event.target.files[0];
if (!file) return; if (!file || (this.beforeRead && !this.beforeRead(file))) {
if (this.beforeRead && !this.beforeRead(file)) return; return;
var reader = new FileReader(); }
const reader = new FileReader();
reader.onload = (e) => { reader.onload = (e) => {
this.afterRead && this.afterRead( this.afterRead && this.afterRead({
{ file,
file: file,
content: e.target.result content: e.target.result
}); });
this.$refs.input && (this.$refs.input.value = ''); this.$refs.input && (this.$refs.input.value = '');
}; };
if (this.resultType === 'dataUrl') { if (this.resultType === 'dataUrl') {
reader.readAsDataURL(file); reader.readAsDataURL(file);
} else if (this.resultType === 'text') { } else if (this.resultType === 'text') {

25
packages/vant-css/src/progress.css
View File

@ -1,32 +1,27 @@
@import './common/var.css'; @import './common/var.css';
.van-progress { .van-progress {
&__bar {
height: 4px; height: 4px;
border-radius: 4.5px;
width: 100%;
background: $c-gray-light;
position: relative; position: relative;
border-radius: 4px;
background: $c-gray-light;
&__finished-portion { &__portion {
border-radius: 4.5px; left: 0;
height: 100%; height: 100%;
position: absolute; position: absolute;
left: 0; border-radius: 4px;
display: inline-block;
} }
&__pivot { &__pivot {
padding: 2px 0; top: 50%;
width: 28px;
font-size: 8px; font-size: 8px;
margin-top: -6px;
position: absolute; position: absolute;
border-radius: 6px; border-radius: 6px;
width: 28px; line-height: 12px;
background-color: $c-gray-light;
line-height: 8px;
text-align: center; text-align: center;
top: 50%; background-color: $c-gray-light;
transform: translate3d(0, -50%, 0);
}
} }
} }

4
test/unit/specs/progress.spec.js
View File

@ -9,8 +9,8 @@ describe('Progress', () => {
wrapper = mount(Progress, { wrapper = mount(Progress, {
propsData: propsData propsData: propsData
}); });
bar = wrapper.find('.van-progress__bar__finished-portion')[0]; bar = wrapper.find('.van-progress__portion')[0];
pivot = wrapper.find('.van-progress__bar__pivot')[0]; pivot = wrapper.find('.van-progress__pivot')[0];
}; };
afterEach(() => { afterEach(() => {

35
yarn.lock
View File

@ -67,7 +67,7 @@ ajv-keywords@^2.0.0:
version "2.1.0" version "2.1.0"
resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.0.tgz#a296e17f7bfae7c1ce4f7e0de53d29cb32162df0" 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" version "4.11.8"
resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536" resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
dependencies: dependencies:
@ -2768,14 +2768,14 @@ extglob@^0.3.1:
dependencies: dependencies:
is-extglob "^1.0.0" is-extglob "^1.0.0"
extract-text-webpack-plugin@2.1.2: extract-text-webpack-plugin@2.0.0:
version "2.1.2" version "2.0.0"
resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-2.1.2.tgz#756ef4efa8155c3681833fbc34da53b941746d6c" resolved "https://registry.npmjs.org/extract-text-webpack-plugin/-/extract-text-webpack-plugin-2.0.0.tgz#8640f72609800a3528f13a2a9634d566a5c1ae60"
dependencies: dependencies:
ajv "^4.11.2"
async "^2.1.2" async "^2.1.2"
loader-utils "^1.0.2" loader-utils "^1.0.2"
schema-utils "^0.3.0" webpack-sources "^0.1.0"
webpack-sources "^1.0.1"
extract-zip@~1.6.5: extract-zip@~1.6.5:
version "1.6.5" version "1.6.5"
@ -6816,6 +6816,10 @@ source-list-map@^2.0.0:
version "2.0.0" version "2.0.0"
resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085" 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: source-map-support@^0.4.15:
version "0.4.16" version "0.4.16"
resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.16.tgz#16fecf98212467d017d586a2af68d628b9421cd8" 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-style-loader "^3.0.0"
vue-template-es2015-compiler "^1.5.3" vue-template-es2015-compiler "^1.5.3"
vue-markdown-loader@^2.0.0: vue-markdown-loader@^2.1.0:
version "2.0.0" version "2.1.0"
resolved "https://registry.yarnpkg.com/vue-markdown-loader/-/vue-markdown-loader-2.0.0.tgz#d3cadbf9c8976a81f2d5e39496d505fd4f31bc96" resolved "https://registry.npmjs.org/vue-markdown-loader/-/vue-markdown-loader-2.1.0.tgz#112d1921dd56daa29906b7c012623c6c5d6e0d8c"
dependencies: dependencies:
cheerio "^0.20.0" cheerio "^0.20.0"
highlight.js "^9.4.0" highlight.js "^9.4.0"
@ -7707,6 +7711,13 @@ webpack-merge@^4.1.0:
dependencies: dependencies:
lodash "^4.17.4" 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: webpack-sources@^1.0.1:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.0.1.tgz#c7356436a4d13123be2e2426a05d1dad9cbe65cf" 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" version "0.1.2"
resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419" resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
zan-doc@^0.2.1: zan-doc@^0.2.2:
version "0.2.1" version "0.2.2"
resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.1.tgz#34723ea180d0ac2e183b66d2a3e4a04b4f6fe91b" resolved "https://registry.npmjs.org/zan-doc/-/zan-doc-0.2.2.tgz#ebf8ffda5bd3cf9277cc3e59c48476a3fbf84d9f"
dependencies: dependencies:
cheerio "0.22.0" cheerio "0.22.0"
decamelize "^1.2.0" decamelize "^1.2.0"