feat(loadingbar): add loadingbar component,and update styles. #301

demo/cases/LoadingBar.vue

@@ -0,0 +1,112 @@
+<template>
+    <article>
+        <h1>
+            <code>&lt;veui-loading-bar&gt;</code>
+        </h1>
+        <h2>模式</h2>
+        <section>
+            <veui-form>
+                <veui-field label="手动模式">
+                    <veui-button
+                        ui="s"
+                        style="width: 70px"
+                        :disabled="autoLock"
+                        @click="toggle"
+                    >{{ toggleLabel }}</veui-button>
+                    <veui-loading-bar ui="fluid" :loading="loading"/>
+                </veui-field>
+                <veui-field label="定时模式">
+                    <veui-button
+                        ui="s"
+                        :disabled="autoLock || manualLock"
+                        @click="startDuration"
+                    >Start</veui-button>
+                    <veui-slider
+                        v-model="duration"
+                        ui="s"
+                        style="width: 200px"
+                        :min="500"
+                        :max="10000"
+                        :disabled="autoLock || manualLock"
+                    />
+                    <veui-loading-bar ui="fluid" :loading="loading"/>
+                </veui-field>
+            </veui-form>
+        </section>
+    </article>
+</template>
+<script>
+import {LoadingBar, Slider, Button, Form, Field} from 'veui';
+export default {
+    name: 'loading-bar',
+    components: {
+        'veui-loading-bar': LoadingBar,
+        'veui-slider': Slider,
+        'veui-button': Button,
+        'veui-form': Form,
+        'veui-field': Field
+    },
+    data() {
+        return {
+            loading: false,
+            duration: 2000,
+            autoLock: false,
+            manualLock: false
+        };
+    },
+    computed: {
+        toggleLabel() {
+            return this.loading ? 'Stop' : 'Start';
+        }
+    },
+    beforeDestroy() {
+        if (this.timer != null) {
+            clearTimeout(this.timer);
+        }
+    },
+    methods: {
+        toggle() {
+            this.manualLock = this.loading = !this.loading;
+        },
+        startDuration() {
+            this.loading = true;
+            this.autoLock = true;
+
+            this.timer = setTimeout(() => {
+                this.loading = false;
+                this.autoLock = false;
+            }, this.duration);
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.controls {
+    display: flex;
+    gap: 32px;
+    align-items: center;
+
+    span {
+    font-weight: 700;
+    color: #999;
+    }
+}
+
+.mode {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 12px;
+}
+
+.demo {
+    margin-top: 40px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.veui-loading-bar {
+    margin-top: 6px;
+}
+</style>

demo/cases/index.js

@@ -43,6 +43,7 @@ import Tree from './Tree';
 import Autocomplete from './Autocomplete';
 import Tag from './Tag';
 import Loading from './Loading';
+import LoadingBar from './LoadingBar';
 import Drawer from './Drawer';
 import Collapse from './Collapse';
 import Popover from './Popover';
@@ -241,6 +242,11 @@ export default [
         name: 'Loading',
         component: Loading
     },
+    {
+        path: '/loading-bar',
+        name: 'LoadingBar',
+        component: LoadingBar
+    },
     {
         path: '/message',
         name: 'Message',

src/components/LoadingBar.js

@@ -0,0 +1,17 @@
+import ui from 'veui/managers/ui';
+
+ui.defaults(
+    {
+        ui: {
+            size: {
+                values: ['s', 'm'],
+                inherit: true,
+                default: 'm'
+            }
+        },
+        parts: {
+            progress: 'fluid'
+        }
+    },
+    'loadingbar'
+);

src/components/loading-bar.less

@@ -0,0 +1,18 @@
+@import "../lib.less";
+
+.@{veui-prefix}-loading-bar {
+  &-enter,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-to,
+  &-leave {
+    opacity: 1;
+  }
+
+  &-enter-active,
+  &-leave-active {
+    .veui-transition(opacity);
+  }
+}