ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-17 08:37:23 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat: 添加progress

Browse Source
This commit is contained in:
jiangruowei
2017-03-13 21:12:02 +08:00
parent a2a62c89f1
commit 5f7e98a547
15 changed files with 349 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
docs/examples-dist/progress.vue Normal file
View File

@@ -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>

48
docs/examples-dist/waterfall.vue
View File

@@ -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>