資訊專欄INFORMATION COLUMN
摘要：項(xiàng)目地址介紹是一個指令，能夠在數(shù)據(jù)被加載之前使用一個可配置的色塊進(jìn)行占位，能夠有效提升用戶體驗(yàn)。當(dāng)數(shù)據(jù)被成功返回后，色塊將會被替換成的內(nèi)容。
項(xiàng)目地址：https://github.com/jrainlau/v...
DEMO：https://jrainlau.github.io/vu...
Vue-Occupy是一個vue指令，能夠在數(shù)據(jù)被加載之前使用一個可配置的色塊進(jìn)行占位，能夠有效提升用戶體驗(yàn)。
安裝使用yarn或者npm的方式進(jìn)行安裝：
# yarn yarn add vue-occupy # npm npm install vue-occupy使用
進(jìn)入項(xiàng)目入口文件，添加以下代碼：
import VueOccupy from "vue-occupy" Vue.use(VueOccupy)
這樣，vue-occupy已經(jīng)被注冊為一個全局的指令，你可以在任意.vue文件里面通過v-occupy使用。
參數(shù)| 參數(shù) | 類型 | 描述 | 是否必須 |
|---|---|---|---|
| data | {Object} | 將要綁定在節(jié)點(diǎn)上的數(shù)據(jù) | Yes |
| config | {Object} | 占位色塊的配置項(xiàng) | No |
舉例：
在fetch方法返回數(shù)據(jù)之前，這個節(jié)點(diǎn)會被一個矩形色塊所占據(jù)。當(dāng)數(shù)據(jù)被成功返回后，色塊將會被替換成content的內(nèi)容。
注意：vue-occupy的默認(rèn)配置項(xiàng)是這樣的：
{
width: 100%;
height: 100%;
background: #eee
}
經(jīng)過vue-occupy處理的節(jié)點(diǎn)會變成下面這樣：
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88155.html
相關(guān)文章
C4J私有化的小程序數(shù)據(jù)統(tǒng)計分析
摘要：私有化私有化解決方案有效的防止了用戶數(shù)據(jù)的泄露，為業(yè)務(wù)提供強(qiáng)有力的數(shù)據(jù)支撐，深度分析更容易，數(shù)據(jù)應(yīng)用靈活更安全，定制化貼近業(yè)務(wù)。 線上流量紅利逐漸消失的今天，產(chǎn)品的獲客成本從幾元，飆升到了現(xiàn)在的幾百元，甚至上千元，流量大戰(zhàn)悄然打響！而 微信社會中的小程序，憑借著離消費(fèi)者一指之遙的距離，成為商家不被淘汰的制勝法寶 。2019年4月，開源的用戶行為分析廠商Cobub推出全渠道的用戶增長利器...
React 動態(tài)渲染圖片，提升用戶體驗(yàn)
摘要：給服務(wù)器發(fā)送一個獲取圖片文件的請求，但是先不在中渲染，直到整個文件都下載完成以后再渲染出來占位符是提前讓用戶產(chǎn)生預(yù)期，預(yù)期圖片正在加載。 作者：Andrew Wong 編譯：胡子大哈 翻譯原文：http://huziketang.com/blog/posts/detail?postId=58d14215a6d8a07e449fdd2b 英文原文：Improve Your UX by ...
一招鮮吃遍天，做好混合云，這招管用
摘要：俗語有一招鮮，吃遍天。其中，的企業(yè)正在實(shí)施多云戰(zhàn)略，的企業(yè)采用混合云戰(zhàn)略，將公有云和私有云集成在一起。隨著混合云的五個一體化由戴爾易安信在戴爾科技峰會上對外發(fā)布，其混合云的新利器也正式登臺亮相了。俗語有一招鮮，吃遍天。說的是行走江湖須得有一技之長，方能到處謀生，不會餓了肚子。時過境遷，這句話放在今天依然有效。隨著IT環(huán)境正向混合云以及多云邁進(jìn)，這一過程有沒有一招鮮的方法呢？讓客戶省時省力又省...
壓箱底寶藏！程序員必不可少的8款辦公利器
摘要：工欲善其事，必先利其器。對于程序員來說，一款得心應(yīng)手的好工具能夠讓開發(fā)工作效率倍增。這就像下的和下的，能夠?qū)崿F(xiàn)不同應(yīng)用程序之間的切換。并不單純的是一款標(biāo)簽頁搜索工具，它能夠在使用過程中掛起未使用的選項(xiàng)卡，以此來釋放內(nèi)存，提高性能。 工欲善其事，必先利其器。 對于程序員來說，一款得心應(yīng)手的好工...
發(fā)表評論
0條評論
閱讀 3724·2021-11-23 09:51
閱讀 1388·2021-11-10 14:35
閱讀 4026·2021-09-22 15:01
閱讀 1295·2021-08-19 11:12
閱讀 392·2019-08-30 15:53
閱讀 1705·2019-08-29 13:04
閱讀 3442·2019-08-29 12:52
閱讀 3069·2019-08-23 16:14
