mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Merge branch 'feature/progress' into 'master'
Feature/progress See merge request !10
This commit is contained in:
zhangmin
commit
7d27e94ded
@ -29,5 +29,6 @@
|
||||
"col": "./packages/col/index.js",
|
||||
"row": "./packages/row/index.js",
|
||||
"actionsheet": "./packages/actionsheet/index.js",
|
||||
"quantity": "./packages/quantity/index.js"
|
||||
"quantity": "./packages/quantity/index.js",
|
||||
"progress": "./packages/progress/index.js"
|
||||
}
|
||||
|
||||
11
docs/build/0.js
vendored
11
docs/build/0.js
vendored
File diff suppressed because one or more lines are too long
2
docs/build/1.js
vendored
2
docs/build/1.js
vendored
@ -1 +1 @@
|
||||
webpackJsonp([1],{225:function(t,e,a){a(414);var i=a(0)(a(239),a(364),null,null);t.exports=i.exports},239:function(t,e,a){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var n=a(24),s=i(n);e.default={data:function(){return{highlights:[],navState:[],data:s.default["zh-CN"],base:"/component"}}}},282:function(t,e,a){e=t.exports=a(15)(),e.push([t.i,".side-nav{width:100%;box-sizing:border-box;padding:40px 20px;background:#f9fafb}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;-webkit-transition:all .3s;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}",""])},364:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"side-nav"},[a("ul",t._l(t.data,function(e){return a("li",{staticClass:"nav-item"},[e.path?a("router-link",{attrs:{"active-class":"active",to:t.base+e.path,exact:""},domProps:{textContent:t._s(e.title||e.name)}}):a("a",[t._v(t._s(e.name))]),t._v(" "),e.children?a("ul",{staticClass:"pure-menu-list sub-nav"},t._l(e.children,function(e){return a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title||e.name)}})],1)})):t._e(),t._v(" "),e.groups?t._l(e.groups,function(e){return a("div",{staticClass:"nav-group"},[a("div",{staticClass:"nav-group__title"},[t._v(t._s(e.groupName))]),t._v(" "),a("ul",{staticClass:"pure-menu-list"},[t._l(e.list,function(e){return[e.disabled?t._e():a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title)}})],1)]})],2)])}):t._e()],2)}))])},staticRenderFns:[]}},414:function(t,e,a){var i=a(282);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);a(25)("1517d9c0",i,!0)}});
|
||||
webpackJsonp([1],{229:function(t,e,a){a(425);var i=a(0)(a(243),a(373),null,null);t.exports=i.exports},243:function(t,e,a){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var n=a(24),s=i(n);e.default={data:function(){return{highlights:[],navState:[],data:s.default["zh-CN"],base:"/component"}}}},287:function(t,e,a){e=t.exports=a(15)(),e.push([t.i,".side-nav{width:100%;box-sizing:border-box;padding:40px 20px;background:#f9fafb}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;-webkit-transition:all .3s;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}",""])},373:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"side-nav"},[a("ul",t._l(t.data,function(e){return a("li",{staticClass:"nav-item"},[e.path?a("router-link",{attrs:{"active-class":"active",to:t.base+e.path,exact:""},domProps:{textContent:t._s(e.title||e.name)}}):a("a",[t._v(t._s(e.name))]),t._v(" "),e.children?a("ul",{staticClass:"pure-menu-list sub-nav"},t._l(e.children,function(e){return a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title||e.name)}})],1)})):t._e(),t._v(" "),e.groups?t._l(e.groups,function(e){return a("div",{staticClass:"nav-group"},[a("div",{staticClass:"nav-group__title"},[t._v(t._s(e.groupName))]),t._v(" "),a("ul",{staticClass:"pure-menu-list"},[t._l(e.list,function(e){return[e.disabled?t._e():a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title)}})],1)]})],2)])}):t._e()],2)}))])},staticRenderFns:[]}},425:function(t,e,a){var i=a(287);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);a(25)("1517d9c0",i,!0)}});
|
||||
7
docs/build/zanui-docs.js
vendored
7
docs/build/zanui-docs.js
vendored
File diff suppressed because one or more lines are too long
7
docs/build/zanui-examples.js
vendored
7
docs/build/zanui-examples.js
vendored
File diff suppressed because one or more lines are too long
46
docs/examples-dist/progress.vue
Normal file
46
docs/examples-dist/progress.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<template><section class="demo-progress"><h1 class="demo-title">progress</h1><example-block title="基础用法">
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" :percentage="0"></zan-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo2" :percentage="46"></zan-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" :percentage="100"></zan-progress>
|
||||
</div>
|
||||
|
||||
</example-block><example-block title="Inactive">
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" :inactive="true" :percentage="0"></zan-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo2" :inactive="true" :percentage="46"></zan-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></zan-progress>
|
||||
</div>
|
||||
</example-block><example-block title="自定义颜色">
|
||||
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></zan-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></zan-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></zan-progress>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b progress {
|
||||
@e wrapper {
|
||||
padding: 5px;
|
||||
margin: 20px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
72
docs/examples-docs/progress.md
Normal file
72
docs/examples-docs/progress.md
Normal file
@ -0,0 +1,72 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b progress {
|
||||
@e wrapper {
|
||||
padding: 5px;
|
||||
margin: 20px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
## Switch组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" :percentage="0"></zan-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo2" :percentage="46"></zan-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" :percentage="100"></zan-progress>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### Inactive
|
||||
:::demo Inactive
|
||||
```html
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" :inactive="true" :percentage="0"></zan-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo2" :inactive="true" :percentage="46"></zan-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></zan-progress>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 自定义颜色和文字
|
||||
:::demo 自定义颜色
|
||||
```html
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></zan-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></zan-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></zan-progress>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| inactive | 是否只会 | boolean | false | true, false |
|
||||
| percentage | 进度百分比 | number | false | 0-100 |
|
||||
| pivotText | 文字显示 | string | 百分比文字 | - |
|
||||
| color | 进度条颜色 | string | #38f | hexvalue |
|
||||
| textColor | 进度条文字颜色 | string | #fff | hexvalue |
|
||||
|
||||
26
packages/progress/README.md
Normal file
26
packages/progress/README.md
Normal file
@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
3
packages/progress/index.js
Normal file
3
packages/progress/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
import Progress from './src/progress';
|
||||
|
||||
export default Progress;
|
||||
10
packages/progress/package.json
Normal file
10
packages/progress/package.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "@youzan/zan-progress",
|
||||
"version": "0.0.1",
|
||||
"description": "progress component",
|
||||
"main": "./index.js",
|
||||
"author": "jiangruowei",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
84
packages/progress/src/progress.vue
Normal file
84
packages/progress/src/progress.vue
Normal file
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div class="zan-progress">
|
||||
<div class="zan-progress__bar">
|
||||
<span class="zan-progress__bar__finished-portion" :style="{backgroundColor: componentColor, width: percentage + '%'}"></span>
|
||||
<span class="zan-progress__bar__pivot" :style="pivotStyle">
|
||||
{{pivotText}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* zan-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
|
||||
* <zan-switch checked="true" disabled="false"></zan-switch>
|
||||
*/
|
||||
export default {
|
||||
name: 'zan-progress',
|
||||
|
||||
props: {
|
||||
percentage: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
validate(value) {
|
||||
return value <= 100 && value >= 0;
|
||||
}
|
||||
},
|
||||
inactive: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
pivotText: {
|
||||
type: String,
|
||||
default: function() {
|
||||
return this.percentage.toString() + '%';
|
||||
}
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#38f'
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
componentColor() {
|
||||
return this.inactive ? '#cacaca' : this.color;
|
||||
},
|
||||
pivotStyle() {
|
||||
const pivotStyle = {
|
||||
backgroundColor: this.componentColor,
|
||||
color: this.textColor,
|
||||
left: this.percentage + '%',
|
||||
marginLeft: '-14px'
|
||||
};
|
||||
console.log(this.percentage);
|
||||
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;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -24,3 +24,4 @@
|
||||
@import './image_preview.css';
|
||||
@import './actionsheet.css';
|
||||
@import './quantity.css';
|
||||
@import './progress.css';
|
||||
|
||||
33
packages/zanui-css/src/progress.css
Normal file
33
packages/zanui-css/src/progress.css
Normal file
@ -0,0 +1,33 @@
|
||||
@import './common/var.css';
|
||||
|
||||
@component-namespace zan {
|
||||
@b progress {
|
||||
@e bar {
|
||||
height: 4px;
|
||||
border-radius: 4.5px;
|
||||
width: 100%;
|
||||
background: $c-gray-light;
|
||||
position: relative;
|
||||
|
||||
@e finished-portion {
|
||||
border-radius: 4.5px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
@e 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -29,6 +29,7 @@ import Col from '../packages/col/index.js';
|
||||
import Row from '../packages/row/index.js';
|
||||
import Actionsheet from '../packages/actionsheet/index.js';
|
||||
import Quantity from '../packages/quantity/index.js';
|
||||
import Progress from '../packages/progress/index.js';
|
||||
|
||||
const install = function(Vue) {
|
||||
if (install.installed) return;
|
||||
@ -60,6 +61,7 @@ const install = function(Vue) {
|
||||
Vue.component(Row.name, Row);
|
||||
Vue.component(Actionsheet.name, Actionsheet);
|
||||
Vue.component(Quantity.name, Quantity);
|
||||
Vue.component(Progress.name, Progress);
|
||||
};
|
||||
|
||||
// auto install
|
||||
@ -100,5 +102,6 @@ module.exports = {
|
||||
Col,
|
||||
Row,
|
||||
Actionsheet,
|
||||
Quantity
|
||||
Quantity,
|
||||
Progress
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user