纯原生实现弹出层 @于志程

前言 ： 因为在做项目时候需要用到了一些效果 所以封装成了一个插件

简单看下效果

GIF.gif

我是用原生js 创建了一个构造函数

• 用到的都是底层的方法 也是为了练习一下
• 这个组件的知识点有以下几点
  1. 首先需要了解Vue.use() 都做了什么？
  2. 导出对象时候 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 构造器，第二个参数是一个可选的选项对象：

也就是说 这个方法的作用就是可以用来添加一些功能入：

• 添加全局方法
• 添加全局属性
• 添加全局资源
• 注入组件选项
• 添加实例方法

看累了吗！！去看看@一片精华面试题前端常见面试题（十）@郝晨光

结言

感谢您的查阅，本文由@程程程整理并总结，代码冗余或者有错误的地方望不吝赐教；菜鸟一枚，请多关照