feat: 添加progress
This commit is contained in:
jiangruowei
Vendored
+10
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
@@ -1 +1 @@
|
||||
webpackJsonp([1],{225:function(t,e,a){a(411);var i=a(0)(a(239),a(361),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"}}}},281: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}",""])},361: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:[]}},411:function(t,e,a){var i=a(281);"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)}});
|
||||
Vendored
+6
-1
File diff suppressed because one or more lines are too long
Vendored
+6
-1
File diff suppressed because one or more lines are too long
@@ -0,0 +1,47 @@
|
||||
<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" pivottext="红色" color="#ed5050" :percentage="26"></zan-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" pivottext="橙色" color="#f60" :percentage="46"></zan-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" pivottext="黄色" color="#f09000" :percentage="66"></zan-progress>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b progress {
|
||||
@e wrapper {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
margin: 20px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@@ -10,9 +10,49 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<style>
|
||||
.waterfall {
|
||||
max-height: 300px;
|
||||
overflow: scroll;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [1, 2, 3, 4, 5],
|
||||
loading: false,
|
||||
finished: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadMore() {
|
||||
if (this.list.length >= 200) {
|
||||
this.finished = true;
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
let lastNumber = this.list[this.list.length - 1];
|
||||
for (let i = 0; i < 5; i ++) {
|
||||
lastNumber += 1;
|
||||
this.list.push(lastNumber);
|
||||
}
|
||||
this.loading = false;
|
||||
}, 2500);
|
||||
},
|
||||
loadMoreUpper() {
|
||||
if (this.list[0] < 0) return;
|
||||
this.list.unshift(-1);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isWaterfallDisabled: function() {
|
||||
return this.loading || this.finished;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -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 |
|
||||
|
||||
Reference in New Issue
Block a user