作者：imgss 出處：http://www.cnblogs.com/imgss 歡迎轉載，也請保留這段聲明。謝謝!
什么是vue插件?
-
從功能上說，插件是為Vue添加全局功能的一種機制，比如給Vue添加一個全局組件，全局指令等；
-
從代碼結構上說，插件就是一個必須擁有
install方法的對象,這個方法的接收的第一個參數是Vue構造函數，還可以接收一個可選的參數，用於配置插件：var myplugin = { install:function(Vue, options){ ... } } -
從意義上來說，正如jQuery的
$.fn使jQuery有了一個龐大的生態一樣，Vue的插件機制使Vue形成了一個生態系統，你可以開發一個插件給別人復用。
使用插件
使用一個插件，只要像下面這樣:
Vue.use(myPlugin)
寫一個loading插件
光說不練假把式，接下來寫一個loading插件練練手，這個插件被封裝成一個全局組件，實現下面的效果:
1定義接口
我們希望應用這個插件的方式如下:
<loading text='imgss' duration='3'></loading>
其中，text用於定義loading動畫顯示的文字，duration定義動畫時間
2實現靜態組件
新建一個loading.js文件：
let myPlugin = {
install: function (Vue, options) {
Vue.component('loading', {
props: {
text:{
type:String
},
duration:{
type:String,
default:'1s'//默認1s
}
},
data: function() {
return {};
},
template: `
<div class='wrapper'>
<div class='loading'>
<span style='width:20px' v-for='char in text'>{{char}}</span>
</div>
</div>
`
});
這里模板的作用在於，將輸入的字符串轉換成組成字符串的字符構成的span元素；
接下來，新建一個html文件：
<html>
<head>
<meta charset='utf-8'>
<title>插件</title>
</head>
<body>
<div id="app">
<loading text='imgss'></loading>
<loading text='我是一個粉刷匠' duration='2s'></loading>
</div>
<script src="http://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script src="./loading.js"></script>
<script>
Vue.use(myPlugin);
var app = new Vue({
el: '#app',
data: {
}
});
</script>
</body>
</html>
這時基本上可以看到一個靜態效果。
3加動畫
給每個元素加上一個控制上下的animation
@keyframes move {
0% {
margin-top: -10px;
border-bottom: 1px solid;
}
50% {
margin-top: 10px;
border-bottom: none;
}
100% {
margin-top: -10px;
}
}
除此之外，還有一下其他的公有樣式代碼，利用mounted生命周期函數，動態生成一個style標簽，將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;
};
}(),
然后通過控制span的animation-delay來模擬曲線:
<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>
到這里，插件基本完成,看一下效果:
