前言 ： 因为在做项目时候需要用到了一些效果 所以封装成了一个插件
简单看下效果
GIF.gif
我是用原生js 创建了一个构造函数
- 用到的都是底层的方法 也是为了练习一下
- 这个组件的知识点有以下几点
- 首先需要了解Vue.use() 都做了什么？
- 导出对象时候 install 是做什么用的？
往下看
/**
* @param {Object} temp 弹出层配置对象
* @param {String} temp.icon 弹出层样式图标
* @param {SuperString} temp.csstext 弹出层内设样式
* @param {String} temp.text 弹出层字体文字
* @param {String} temp.w 弹出层宽度
* @param {String} temp.h 弹出层高度
* @param {String} temp.class 弹出层c3动画类名
* @return {Object} 弹出层 实例化一个弹出层对象
* */
function Popup(temp) {
this.w = temp.w || '1.4rem';
this.h = temp.h || '1.4rem';
this.c = temp.c;
this.text = temp.text;
this.icon = temp.icon;
this.class = temp.class;
this.csstext = temp.csstext;
}
Popup.prototype.style = function () {
this.div = document.createElement('div');
this.div2 = document.createElement('div');
this.div2.style.cssText = 'height:100%;width:100%;position:absolute;top:0;z-index:10000;'
this.div.id = 'showicon'
this.iconfont = document.createElement('i');
this.iconfont.style.cssText = `font-size:.65rem;color:${this.c}`
this.span = document.createElement('span');
this.span.innerText = this.text;
this.span.style.cssText = 'font-size:.16rem'
this.iconfont.className = `iconfont ${this.icon}`
this.div.classList.add(this.class || 'Popping')
this.div.style.cssText = this.csstext || `height:${this.h};width:${this.w};
background:black;
position:fixed;
z-index:10000;
top:0;
color:${this.c};
font-size:.14rem;
display:flex;
flex-direction: column;
text-align: center;
justify-content: space-between;
padding-top:.2rem;
padding-bottom:.2rem;
border-radius:.08rem;
top:0;
left:0;
right:0;
bottom:0;
margin: auto auto;
opction:0.6;
transfrom:all;
`;
}
Popup.prototype.handle = function () {
this.div.appendChild(this.iconfont)
this.div.appendChild(this.span)
this.div2.appendChild(this.div)
if (document.getElementById('showicon') === null) {
document.body.appendChild(this.div2)
setTimeout(() => {
document.body.removeChild(this.div2)
}, 3000);
} else {
return
}
}
export default Popup
我只是定义了一个方法 然后导出
import popup from './VDfunc/popup'
const poputexample = function (opction) {
const obj = new popup(opction)
obj.style()
obj.handle()
return obj
}
export default {
popup: poputexample,
install(Vue) {
Vue.prototype.$Popup = poputexample;
}
};
写的略有简陋
- 用的是纯原生的方法创建一个
div - 然后为这个
div加上属性方法 - 然后内容什么的也插入到这个
div当中 - 最后把这个
div插入到dom根节点当中 - 首先我给这个
div加了一个id ` - 当节点中有这个
div的时候 让他不触发这个方法 - 没有的时候 再 插入到
dom当中 - 最后 把这个方法导出
- 现在
main.js当中 引入这个文件 - 然后再在
Vue实例当中 把这个方法挂在到实例上 - 这样的话你就可以直接在任何子组件当中调用
- 调用方法就是
this.$Popup - 当然 this后面的这个方法名是可以自己定义的 相当于就是一个变量
然后 样式的话 我是写了一个公用的 c3动画样式文件
.Popping{
animation: popping 3s forwards;
}
@keyframes popping{
0%{
opacity: 0;
}
33%{
opacity: 1;
}
66%{
opacity: 1;
}
100%{
opacity: 0;
}
}
- 这只是其中一个方法
- 因为移动端的话对于有些属性支持不是特别的好
- （比如轮播图时候用定位移动的方法的话 回有卡顿之类的）
- 所以相对效果来说 c3动画是不错的选择 兼容性也不错
- 所以我定义了一个公共文件来存放方法
- 这样以后需要用到的话 直接写在公共文件里面
- 调用的话 直接加上class名称就可以了
最后来看这个
- 因为不在全局引入的话 你每次使用的话 需要在当前组件引入
- 然后 还需要new一个对象出来 所以相对来说 不那么方便
- 也是为了减少代码的堆积
- 所以推荐在全局引入
import Vue from 'vue'
import popup from './services/VDfunc/popup'
Vue.use(popup)
这样就可以直接来使用了
接下来咱们来看使用方法
this.$Popup({
c: "rgba(245,245,245)",
icon: "icon-wz",
text: "添加成功"
});
- 使用方法为
this.方法名 然后({})的形式调用 - 因为有默认参数 你可以不写参数 直接实例
- 也可以传进去你想要的效果
- 想要的参数
- 想到的内容 等等···
- 传参达到了不同的效果内容
-----
我的调用参数写在这里
/**
* @param {Object} temp 弹出层配置对象
* @param {String} temp.icon 弹出层样式图标
* @param {SuperString} temp.csstext 弹出层内设样式
* @param {String} temp.text 弹出层字体文字
* @param {String} temp.w 弹出层宽度
* @param {String} temp.h 弹出层高度
* @param {String} temp.class 弹出层c3动画类名
* @return {Object} 弹出层 实例化一个弹出层对象
* */
接下来讲一下 需要记住 掌握的知识点
问题
相信很多人在用Vue使用别人的组件时， 会用到
Vue.use()。 例如：Vue.use(VueRouter)，Vue.use(element)但是用axios时 ， 就不需要用到Vue.use(axios)， 就能直接使用 。 那这是为什么呢
答案
因为
axios没有install。 什么意思呢？看一下我上面的代码 你就会发现 我的代码上 导出的时候 写了一个install。 就是因为有了这个 所以我们引入的时候 就需要用到Vue.use()
export default {
popup: Popup,
install(Vue) {
Vue.prototype.$Popup = Popup;
}
};
也就是上面这个 因为 用到了
install所以 如果你不用Vue.use()的话 她不能使用 也就是说 他会报错
Vue.js的插件应该暴露一个install方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：也就是说 这个方法的作用就是可以用来添加一些功能入：
- 添加全局方法
- 添加全局属性
- 添加全局资源
- 注入组件选项
- 添加实例方法
看累了吗！！去看看@一片精华面试题前端常见面试题（十）@郝晨光
结言
感谢您的查阅，本文由@程程程整理并总结，代码冗余或者有错误的地方望不吝赐教；菜鸟一枚，请多关照
