作者：imgss
出处：http://www.cnblogs.com/imgss
什么是vue插件"htmlcode">
从意义上来说，正如jQuery的 使用插件 使用一个插件，只要像下面这样: 写一个loading插件 光说不练假把式，接下来写一个loading插件练练手，这个插件被封装成一个全局组件，实现下面的效果: 1 定义接口 我们希望应用这个插件的方式如下: 其中，text用于定义loading动画显示的文字，duration定义动画时间 2 实现静态组件 新建一个loading.js文件： 这里模板的作用在于，将输入的字符串转换成组成字符串的字符构成的span元素； 这时基本上可以看到一个静态效果。 3 加动画 给每个元素加上一个控制上下的animation 除此之外，还有一下其他的公有样式代码，利用 然后通过控制span的animation-delay来模拟曲线: 到这里，插件基本完成,看一下效果: demo 代码 codepen 以上就是写一个Vue loading 插件的详细内容，更多关于Vue 插件的资料请关注其它相关文章！
var myplugin = {
install:function(Vue, options){
...
}
}
$.fn使jQuery有了一个庞大的生态一样，Vue的插件机制使Vue形成了一个生态系统，你可以开发一个插件给别人复用。
Vue.use(myPlugin)
<loading text='imgss' duration='3'></loading>
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>
`
});
接下来，新建一个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="/UploadFiles/2021-04-02/vue.js">
@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
:style='{
width: "20px",
animationDuration: duration.indexOf("s") === -1 "s" : duration ,
animationDelay: parseInt(duration)/text.length*index +"s"
}'
v-for='char,index in text'>
{{char}}
</span>
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。