寫一個(gè)Vue loading 插件
作者：imgss
出處：http://www.cnblogs.com/imgss
什么是vue插件?
從功能上說(shuō)，插件是為Vue添加全局功能的一種機(jī)制，比如給Vue添加一個(gè)全局組件，全局指令等； 從代碼結(jié)構(gòu)上說(shuō)，插件就是一個(gè)必須擁有install方法的對(duì)象,這個(gè)方法的接收的第一個(gè)參數(shù)是Vue構(gòu)造函數(shù)，還可以接收一個(gè)可選的參數(shù)，用于配置插件：var myplugin = { install:function(Vue, options){ ... }}
從意義上來(lái)說(shuō)，正如jQuery的$.fn使jQuery有了一個(gè)龐大的生態(tài)一樣，Vue的插件機(jī)制使Vue形成了一個(gè)生態(tài)系統(tǒng)，你可以開發(fā)一個(gè)插件給別人復(fù)用。
使用插件
使用一個(gè)插件，只要像下面這樣:
Vue.use(myPlugin)
寫一個(gè)loading插件
光說(shuō)不練假把式，接下來(lái)寫一個(gè)loading插件練練手，這個(gè)插件被封裝成一個(gè)全局組件，實(shí)現(xiàn)下面的效果:
1 定義接口
我們希望應(yīng)用這個(gè)插件的方式如下:
<loading text=’imgss’ duration=’3’></loading>
其中，text用于定義loading動(dòng)畫顯示的文字，duration定義動(dòng)畫時(shí)間
2 實(shí)現(xiàn)靜態(tài)組件
新建一個(gè)loading.js文件：
let myPlugin = { install: function (Vue, options) { Vue.component(’loading’, { props: { text:{ type:String }, duration:{ type:String, default:’1s’//默認(rèn)1s } }, data: function() { return {}; }, template: ` <div class=’wrapper’> <div class=’loading’> <span style=’width:20px’ v-for=’char in text’>{{char}}</span> </div> </div> ` });
這里模板的作用在于，將輸入的字符串轉(zhuǎn)換成組成字符串的字符構(gòu)成的span元素；接下來(lái)，新建一個(gè)html文件：
<html> <head> <meta charset=’utf-8’> <title>插件</title> </head> <body> <div id='app'> <loading text=’imgss’></loading> <loading text=’我是一個(gè)粉刷匠’ duration=’2s’></loading> </div> <script src='http://cdn.bootcss.com/vue/2.4.2/vue.js'></script> <script src='http://www.b3g6.com/bcjs/loading.js'></script> <script> Vue.use(myPlugin); var app = new Vue({ el: ’#app’, data: { } }); </script> </body></html>
這時(shí)基本上可以看到一個(gè)靜態(tài)效果。
3 加動(dòng)畫
給每個(gè)元素加上一個(gè)控制上下的animation
@keyframes move { 0% { margin-top: -10px; border-bottom: 1px solid; } 50% { margin-top: 10px; border-bottom: none; } 100% { margin-top: -10px; } }
除此之外，還有一下其他的公有樣式代碼，利用mounted生命周期函數(shù)，動(dòng)態(tài)生成一個(gè)style標(biāo)簽，將css代碼插到文檔中:
mounted: function () { var cssFlag = false; return function () { if (cssFlag) { return; } var head = document.querySelector(’head’); var style = document.createElement(’style’); style.type = ’text/css’; style.innerText = ` .wrapper{ display: flex; justify-content: center; } .loading { display: flex; text-align: center; padding-top: 30px; height: 50px; justify-content: space-between; } .loading span { margin-top: 0; animation: ease infinite move; display: block; } @keyframes move { 0% { margin-top: -10px; border-bottom: 1px solid; } 50% { margin-top: 10px; border-bottom: none; } 100% { margin-top: -10px; } }`; head.appendChild(style); cssFlag = true; }; }(),
然后通過(guò)控制span的animation-delay來(lái)模擬曲線:
<span :style=’{ width: '20px', animationDuration: duration.indexOf('s') === -1 ? duration + 's' : duration , animationDelay: parseInt(duration)/text.length*index +'s' }’ v-for=’char,index in text’> {{char}} </span>
到這里，插件基本完成,看一下效果:
demo
代碼
codepen
以上就是寫一個(gè)Vue loading 插件的詳細(xì)內(nèi)容，更多關(guān)于Vue 插件的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. Docker 部署 Prometheus的安裝詳細(xì)教程2. idea 打包的jar運(yùn)行報(bào) "XXX中沒(méi)有主清單屬性"3. idea重置默認(rèn)配置的方法步驟4. 通過(guò)Django Admin+HttpRunner1.5.6實(shí)現(xiàn)簡(jiǎn)易接口測(cè)試平臺(tái)5. IntelliJ IDEA設(shè)置自動(dòng)提示功能快捷鍵的方法6. IntelliJ IDEA安裝插件的方法步驟7. idea打開多個(gè)窗口的操作方法8. php過(guò)濾器使用詳解9. IntelliJ IDEA調(diào)整字體大小的方法10. idea設(shè)置代碼格式化的方法步驟
網(wǎng)公網(wǎng)安備