如何利用Vue编写一个加载插件

　　介绍

如何利用Vue编写一个加载插件?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

<强>什么是Vue插件

    <李>从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等; <李>从代码结构上说,插件就是一个必须拥有安装方法的对象,这个方法的接收的第一个参数是Vue构造函数,还可以接收一个可选的参数,用于配置插件: 
 var并且={
　　安装:函数(Vue、期权){
　　…
　　}
　　}

从意义上来说,正如jQuery的<代码>美元。fn>

<强>使用插件

使用一个插件,只要像下面这样:

 Vue.use(并且)

<强>写一个加载插件

光说不练假把式,接下来写一个加载插件练练手,这个插件被封装成一个全局组件,实现下面的效果:

如何利用Vue编写一个加载插件

<强> 1定义接口

我们希望应用这个插件的方式如下:

& lt;加载文本=& # 39;imgss& # 39;时间=& # 39;3 & # 39;祝辞& lt;/loading>

其中,文本用于定义加载动画显示的文字,时间定义动画时间

<强> 2实现静态组件

新建一个装载。js文件:

让并且={ 　　安装:函数(Vue、期权){ 　　Vue.component(& # 39;加载# 39;,{ 　　道具:{ 　　文字:{ 　　类型:字符串 　　}, 　　持续时间:{ 　　类型:字符串, 　　默认值:& # 39;1 & # 39;//默认 　　} 　　}, 　　数据:函数(){ 　　返回{}; 　　}, 　　模板: 　　& lt; div类=& # 39;包装# 39;比; 　　& lt; div类=& # 39;加载# 39;比; 　　& lt;跨风格=& # 39;宽度:20 px # 39;v=& # 39;字符在文本# 39;在{{char}} & lt;/span> 　　& lt;/div> 　　& lt;/div> 　　” 　　});

这里模板的作用在于,将输入的字符串转换成组成字符串的字符构成的跨度元素;
接下来,新建一个html文件:

 & lt; html>
　　& lt; head>
　　& lt;元charset=& # 39; utf - 8 # 39;比;
　　& lt; title>插件& lt;/title>
　　& lt;/head>
　　& lt; body>
　　& lt; div id=癮pp"祝辞
　　& lt;加载文本=& # 39;imgss& # 39;祝辞& lt;/loading>
　　& lt;加载文本=& # 39;我是一个粉刷匠& # 39;时间=& # 39;2 & # 39;祝辞& lt;/loading>
　　& lt;/div>
　　& lt;脚本src=癶ttp://cdn.bootcss.com/vue/2.4.2/vue.js"祝辞& lt;/script>
　　& lt;脚本src=啊?loading.js"祝辞& lt;/script>
　　& lt; script>
　　Vue.use(并且);
　　应用var=new Vue ({
　　艾尔:& # 39;#应用# 39;
　　数据:{
　　}
　　})；
　　& lt;/script>
　　
　　& lt;/body>
　　& lt;/html>

这时基本上可以看到一个静态效果。

<强> 3加动画

给每个元素加上一个控制上下的动画

 @keyframes移动{
　　0% {
　　margin-top: -10 px;
　　边界底部:1 px固体;
　　}
　　50% {
　　margin-top: 10 px;
　　边界底部:没有;
　　}
　　100% {
　　margin-top: -10 px;
　　}
　　}

除此之外,还有一下其他的公有样式代码,利用<代码> 安装生命周期函数、动态生成一个风格标签,将css代码插到文档中:

安装:函数(){
　　var cssFlag=false;
　　返回函数(){
　　如果(cssFlag) {
　　返回;
　　}
　　var=document.querySelector负责人(& # 39;头# 39;);
　　var=document.createElement风格(& # 39;风格# 39;);
　　风格。类型=& # 39;文本/css # 39;;
　　风格。innerText='实现
　　.wrapper {
　　显示:flex;
　　justify-content:中心;
　　}
　　.loading {
　　显示:flex;
　　text-align:中心;
　　padding-top: 30 px;
　　高度:50 px;
　　justify-content:之间的空间;
　　}
　　.loading跨度{
　　margin-top: 0;
　　动画:缓解无限移动;
　　显示:块;
　　}
　　
　　@keyframes移动{
　　0% {
　　margin-top: -10 px;
　　边界底部:1 px固体;
　　}
　　50% {
　　margin-top: 10 px;
　　边界底部:没有;
　　}
　　100% {
　　margin-top: -10 px;
　　}
　　}';
　　head.appendChild(风格);
　　cssFlag=true;
　　}；
　　}()

然后通过控制跨度的animation-delay来模拟曲线:

& lt;跨度 　　:风格=& # 39;{ 　　宽度:“20 px" 　　animationDuration: duration.indexOf (“s")===1, # 63;持续时间+“s":持续时间, 　　animationDelay:方法(时间)/文本。长度*指数+“s" 　　}& # 39; 　　v代表=& # 39;char,指数在文本# 39;比; 　　{{char}} 　　& lt;/span>

如何利用Vue编写一个加载插件