vue自定義封裝Loading元件

一、需求問題

在vue專案的開發中，會經常遇到這樣的需求。當在頁面內容進行載入的時候，會進行請求資料，然後顯示頁面。在這個等待的過程中，會出現一段時間的白屏，我們可以通過加乙個loading的效果，進行過渡，然後顯示頁面。

二、需求分析

在components資料夾中，建立loading資料夾，裡面建立index.vue檔案，作為loading元件。這個載入元件在頁面的多個位置中都可能會用的到，可以全域性註冊元件。在專案的main.js檔案中寫以下的**配置，進行全域性註冊。

import loading from '@/components/loading'

vue.component('loading', loading);

在需要使用loading元件的頁面中，直接進行使用。通過元件內部使用v-if而使用isloading的值，在data中設定isloading，預設為true。當在資料請求完畢以後，再將isloading的值設為false。同時在使用loading元件下面的頁面內容，需要使用v-else，不然再請求完資料後無法顯示頁面內容。

三、需求實現

main.js

import vue from

'vue'
import router from
'./router'
import store from
'./store'
import axios from
'axios'
vue.prototype.axios = axios;
vue.
filter
('setwh'
,(url, arg)
=>);
vue.config.productiontip =
false
;import scroller from
'@/components/scroller'
// 全域性註冊 scroller 元件
vue.
component
('scroller'
, scroller)
;import loading from
'@/components/loading'
vue.
component
('loading'
, loading)
;new
vue().
$mount
()

="loader"

>
<
/div>
<
/template>
export
default
<
/script>
"scss" scoped>
$colors:
hsla
(337,84
,48,0.75
)hsla
(160,50
,48,0.75
)hsla
(190,61
,65,0.75
)hsla(41
,82,52
,0.75);
$size:
2.5em;
$thickness:
0.5em;
// calculated variables.
$lat:
($size - $thickness)/2
;$offset: $lat - $thickness;
.loader 
&:before 
&:after 
}@keyframes before 35%
70%100%
}@keyframes after 35%
70%100%
}html,
body 
.loader );
left:
calc(50
%- #);
}<
/style>

="movie_body"

>
"isloading"
/>
else
>
for=
"item in cominglist"
:key=
"item.id"
>
="pic_show"
>
>
<
/div>
="info_list"
>
}"@/assets" alt=
"">
<
/h2>
="person"
>
}<
/span> 人想看<
/p>
主演：}
<
/p>
}上映<
/p>
<
/div>
="btn_pre"
>
預售<
/div>
<
/li>
<
/ul>
<
/scroller>
<
/div>
<
/template>
export
default},
mounted()
})}}
<
/script>
#content .movie_body
.movie_body ul
.movie_body ul li
.movie_body .pic_show
.movie_body .pic_show img
.movie_body .info_list 
.movie_body .info_list h2
.movie_body .info_list p
.movie_body .info_list .grade
.movie_body .info_list img
.movie_body .btn_mall ,
.movie_body .btn_pre
.movie_body .btn_pre
<
/style>

vue 封裝dialog vue自定義封裝彈框元件

1.新建乙個新元件命名命名為alertbox.vue 一.dom結構 提示 否是 二.script export default props isshowalert message data return isshowdialogs true methods isshowrefruct this.i...

vue裡自定義封裝axios

今天研究了一下公司pc端封裝的axios，主要配合element以及js cookie，自己跟著搞了一遍，在這裡記錄一下。import axios from axios import from element ui import cookies from js cokie 基於axios基本配置建立...

WinForm自定義Loading控制項

在vs2008下封裝winform自定義loading控制項。autocircle.cs封裝了旋轉的圓形，直接在裡面新增label的話，計算圓形扇面的方法有點小複雜，所以在loadingpanel.cs將autocircle和label封裝在一起。該控制項中提供了當loadingpanel狀態變化時...