other / mew-iview

Commit f97e5bb01ad9aa43431d73cc0a6c34afad9c95bb

Authored by 梁灏
1 parent d9786906

support LoadingBar 

support LoadingBar @Jetsly
Showing 7 changed files with 71 additions and 22 deletions   Show diff stats
Inline Side-by-side
@@ -46,3 +46,6 @@ model 改为 value，支持 v-model @@ -46,3 +46,6 @@ model 改为 value，支持 v-model
46 ### Page 46 ### Page
47 class 改为 className 47 class 改为 className
48 ### DatePicker 48 ### DatePicker
  49 +使用 v-model
  50 +### LoadingBar
  51 +部分 prop 移至 data
49 \ No newline at end of file 52 \ No newline at end of file
@@ -55,7 +55,7 @@ @@ -55,7 +55,7 @@
55 - [x] Page 55 - [x] Page
56 - [x] Breadcrumb 56 - [x] Breadcrumb
57 - [x] Steps 57 - [x] Steps
58 -- [ ] LoadingBar 58 +- [x] LoadingBar
59 - [x] Circle 59 - [x] Circle
60 - [x] Affix 60 - [x] Affix
61 - [x] BackTop 61 - [x] BackTop
@@ -50,6 +50,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; } @@ -50,6 +50,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
50 <li><router-link to="/date">Date</router-link></li> 50 <li><router-link to="/date">Date</router-link></li>
51 <li><router-link to="/form">Form</router-link></li> 51 <li><router-link to="/form">Form</router-link></li>
52 <li><router-link to="/table">Table</router-link></li> 52 <li><router-link to="/table">Table</router-link></li>
  53 + <li><router-link to="/loading-bar">LoadingBar</router-link></li>
53 </ul> 54 </ul>
54 </nav> 55 </nav>
55 <router-view></router-view> 56 <router-view></router-view>
@@ -165,6 +165,10 @@ const router = new VueRouter({ @@ -165,6 +165,10 @@ const router = new VueRouter({
165 path: '/table', 165 path: '/table',
166 component: require('./routers/table.vue') 166 component: require('./routers/table.vue')
167 }, 167 },
  168 + {
  169 + path: '/loading-bar',
  170 + component: require('./routers/loading-bar.vue')
  171 + }
168 ] 172 ]
169 }); 173 });
170 174
examples/routers/loading-bar.vue 0 → 100644
  Show/Hide comments   View file @f97e5bb
  1 +<template>
  2 + <div>
  3 + <i-button @click.native="start">Start</i-button>
  4 + <i-button @click.native="finish">Finish</i-button>
  5 + <i-button @click.native="error">Error</i-button>
  6 + </div>
  7 +</template>
  8 +<script>
  9 + export default {
  10 + methods: {
  11 + start () {
  12 + this.$Loading.start();
  13 + },
  14 + finish () {
  15 + this.$Loading.finish();
  16 + },
  17 + error () {
  18 + this.$Loading.error();
  19 + }
  20 + },
  21 + created () {
  22 + this.$Loading.config({
  23 + color: '#5cb85c',
  24 + failedColor: '#f0ad4e',
  25 + height: 5
  26 + });
  27 + }
  28 + }
  29 +</script>
src/components/loading-bar/loading-bar.vue
  Show/Hide comments   View file @f97e5bb
1 <template> 1 <template>
2 - <div :class="classes" :style="outerStyles" v-show="show" transition="fade">  
3 - <div :class="innerClasses" :style="styles"></div>  
4 - </div> 2 + <transition name="fade">
  3 + <div :class="classes" :style="outerStyles" v-show="show">
  4 + <div :class="innerClasses" :style="styles"></div>
  5 + </div>
  6 + </transition>
5 </template> 7 </template>
6 <script> 8 <script>
7 import { oneOf } from '../../utils/assist'; 9 import { oneOf } from '../../utils/assist';
@@ -10,10 +12,10 @@ @@ -10,10 +12,10 @@
10 12
11 export default { 13 export default {
12 props: { 14 props: {
13 - percent: {  
14 - type: Number,  
15 - default: 0  
16 - }, 15 +// percent: {
  16 +// type: Number,
  17 +// default: 0
  18 +// },
17 color: { 19 color: {
18 type: String, 20 type: String,
19 default: 'primary' 21 default: 'primary'
@@ -26,17 +28,27 @@ @@ -26,17 +28,27 @@
26 type: Number, 28 type: Number,
27 default: 2 29 default: 2
28 }, 30 },
29 - status: {  
30 - type: String,  
31 - validator (value) {  
32 - return oneOf(value, ['success', 'error']);  
33 - },  
34 - default: 'success'  
35 - },  
36 - show: {  
37 - type: Boolean,  
38 - default: false  
39 - } 31 +// status: {
  32 +// type: String,
  33 +// validator (value) {
  34 +// return oneOf(value, ['success', 'error']);
  35 +// },
  36 +// default: 'success'
  37 +// },
  38 +// show: {
  39 +// type: Boolean,
  40 +// default: false
  41 +// }
  42 + },
  43 + data () {
  44 + return {
  45 + percent: 0,
  46 +// color: 'primary',
  47 +// failedColor: 'error',
  48 +// height: 2,
  49 + status: 'success',
  50 + show: false
  51 + };
40 }, 52 },
41 computed: { 53 computed: {
42 classes () { 54 classes () {
@@ -19,7 +19,7 @@ import Form from &#39;./components/form&#39;; @@ -19,7 +19,7 @@ import Form from &#39;./components/form&#39;;
19 import Icon from './components/icon'; 19 import Icon from './components/icon';
20 import Input from './components/input'; 20 import Input from './components/input';
21 import InputNumber from './components/input-number'; 21 import InputNumber from './components/input-number';
22 -// import LoadingBar from './components/loading-bar'; 22 +import LoadingBar from './components/loading-bar';
23 import Menu from './components/menu'; 23 import Menu from './components/menu';
24 // import Message from './components/message'; 24 // import Message from './components/message';
25 // import Modal from './components/modal'; 25 // import Modal from './components/modal';
@@ -75,7 +75,7 @@ const iview = { @@ -75,7 +75,7 @@ const iview = {
75 // iInput: Input, 75 // iInput: Input,
76 Input, 76 Input,
77 InputNumber, 77 InputNumber,
78 - // LoadingBar, 78 + LoadingBar,
79 Menu, 79 Menu,
80 MenuGroup: Menu.Group, 80 MenuGroup: Menu.Group,
81 MenuItem: Menu.Item, 81 MenuItem: Menu.Item,
@@ -121,7 +121,7 @@ const install = function (Vue, opts = {}) { @@ -121,7 +121,7 @@ const install = function (Vue, opts = {}) {
121 Vue.component(key, iview[key]); 121 Vue.component(key, iview[key]);
122 }); 122 });
123 123
124 - // Vue.prototype.$Loading = LoadingBar; 124 + Vue.prototype.$Loading = LoadingBar;
125 // Vue.prototype.$Message = Message; 125 // Vue.prototype.$Message = Message;
126 // Vue.prototype.$Modal = Modal; 126 // Vue.prototype.$Modal = Modal;
127 // Vue.prototype.$Notice = Notice; 127 // Vue.prototype.$Notice = Notice;