| 1 | # Loading 加载动画
|
| 2 |
|
| 3 | ### 使用
|
| 4 |
|
| 5 | :::kview
|
| 6 |
|
| 7 | ```html
|
| 8 | <template>
|
| 9 | <a class="k-button" style="color:red" @click="toggleLoading">点击显示/隐藏加载动画{{loading}}</a>
|
| 10 | </template>
|
| 11 |
|
| 12 | <style>
|
| 13 | .k-button{
|
| 14 | color:#3a8ee6;
|
| 15 | position:fixed;
|
| 16 | top:0;
|
| 17 | right:100px;
|
| 18 | bottom:0;
|
| 19 | margin:auto;
|
| 20 | z-index:99999;
|
| 21 | border:1px solid #3a8ee6;
|
| 22 | width:300px;
|
| 23 | height:30px;
|
| 24 | display:flex;
|
| 25 | justify-content:center;
|
| 26 | align-items:center;
|
| 27 | background:yellow;
|
| 28 | }
|
| 29 | .k-button:hover{
|
| 30 | cursor:pointer;
|
| 31 | }
|
| 32 |
|
| 33 | </style>
|
| 34 |
|
| 35 | <script>
|
| 36 | export default {
|
| 37 | data() {
|
| 38 | return {
|
| 39 | loading: false,
|
| 40 | }
|
| 41 | },
|
| 42 | methods: {
|
| 43 | toggleLoading() {
|
| 44 | this.loading = !this.loading;
|
| 45 | console.log('loading', this.loading);
|
| 46 | this.$loading[this.loading ? 'show' : 'hide'](() => {
|
| 47 | console.log('call-back');
|
| 48 | setTimeout(()=>{
|
| 49 | this.loading=false;
|
| 50 | this.$loading.hide();
|
| 51 | },3000)
|
| 52 | })
|
| 53 | },
|
| 54 | },
|
| 55 | };
|
| 56 |
|
| 57 | </script>
|
| 58 | ```
|
| 59 |
|
| 60 | :::
|
| 61 |
|
| 62 | ### Attributes
|
| 63 | <div class="markdown-table">
|
| 64 |
|
| 65 | | 属性 | 说明 | 类型|可选值|默认值|是否必须
|
| 66 | |-------|---------|---|---|---|---|
|
| 67 | |callback|回调函数|Function|-|-|-
|
| 68 | |background|背景色|String|-|rgba(0, 0, 0, .6)|-
|
| 69 | |color|加载图标颜色|String|-|#4b9cdb|-
|
| 70 |
|
| 71 | </div>
|
| 72 |
|
| 73 |
|
| 74 | ### Events
|
| 75 | <div class="markdown-table">
|
| 76 |
|
| 77 | | 方法名 | 说明 |
|
| 78 | | ------ |----- |
|
| 79 | | show | 显示提示 | 详见Attributes表 |
|
| 80 | | hide | 隐藏提示 | 详见Attributes表 |
|
| 81 |
|
| 82 | </div>
|
| 83 |
|