Handwriting a pop assembly -vue

Recent project, to make their own handwriting a global pop components, posted below in your own code.

Components written in relatively simple notice.vue

<template>
  <div class="alert">
    <div class="alert-container" v-for="item in alerts" :key="item.id">
      <div class="alert-content">{{item.content}}</div>
    </div>
  </div>
</template>
<script>
export default {
    name:'notice',
    data() {
        return {
            alerts: []
        }
    },
    created () {
        // id自增控制
        this.id = 0;
    },
    methods: {
        add(options) {
            const id = 'id_' + this.id++;
            const _alert = {...options,id:id};
            this.alerts.push(_alert);
            // 自动关闭
            const duration = options.duration || 1; //单位秒
            setTimeout(() => {
                this.del(id);
            }, duration * 1000);
        },
        del (id){
            for (let i = 0; i< this.alerts.length; i++) {
              const element = this.alerts[i];
              if(element.id === id){
                  this.alerts.splice(i,1);
                  break;
              }
            }
        }
    },

}
</script>

<style  scoped>
    .alert {
  position: fixed;
  width: 100%;
  top: 30px;
  left: 0;
  text-align: center;
 }
  .alert  .alert-content {
    display: inline-block;
    padding: 8px;
    background: #fff;
    margin-bottom: 10px;
  }

</style>

Since mount assembly defined here used two different forms, a specific method of taking into account the different components required, such as a notice single components only mode embodiment, so he used to mount a notice.js, other common components can be employed to mount the second embodiment.

  1 will notice mount vue instance, a first embodiment

import Notice from '@/components/Notice.vue';
import Vue from 'vue';

// 给Notice 添加一个创建组建实例的方法，可以动态编译自身模版并挂载
Notice.getInstance = props =>{
    // 创建一个Vue实例
    const instance = new Vue({
        render(h){ //渲染函数，用户渲染置顶模版为虚拟DOM
            // 
            return h(Notice,{ props })
        }
    }).$mount(); //执行挂载 ，若不置顶选择器，则模版将被渲染为文档之外的 元素
    // 必须使用原生的DOM操作 插入到文档中
    document.body.appendChild(instance.$el);

    //获取Notice实例
    const notice = instance.$children[0];
    return notice;
     
}
// 设计一个单例模式，全局范围唯一创建一个Notice实例
let msgInstance = null;
function getInstance() {
    msgInstance = msgInstance || Notice.getInstance();
    return msgInstance;
}
// 暴露接口
export default{
    info({duration=2,content= ''}){
        getInstance().add({
            content,
            duration
        });
    }
}

The second way is to mount a manner similar to common components custom components manner cube-ui

import Vue from 'vue';

// 给Notice 添加一个创建组建实例的方法，可以动态编译自身模版并挂载
function create(Component,props) {
    // 创建一个Vue实例
    const instance = new Vue({
        render(h){ //渲染函数，用户渲染置顶模版为虚拟DOM
            // 例 <BallAnim :el="el">
            return h(Component,{ props })
        }
    }).$mount(); //执行挂载 ，若不置顶选择器，则模版将被渲染为文档之外的 元素
    // 必须使用原生的DOM操作 插入到文档中
    document.body.appendChild(instance.$el);

    //获取Notice实例
    const comp = instance.$children[0];
    comp.remove = () => {
        instance.$destory(); //销毁实例，释放内存
    }
    return comp;
     
}
// 暴露接口
export default create;

In main.js call

import Notice from '@/components/Notice.vue';

import notice from '@/services/notice.js';

Vue.prototype.$notice = notice;

The final step is using this component pop

 // 自定义的方式
      this.$notice.info({
        duration:3,
        content:'消息'
     })

Just call where needed this method can be used.

Another method invocation

Create.js introduced in the components you need in

import create from '@/services/create';

import BallAnim from '@ / components / ballAnim.vue'; // create their own components

//创建实例，并调用
 const anim = create(BallAnim,{el});
//组件内自己的方法
    anim.start();
    anim.$on('transtioned', ()=>{
      anim.remove()
    })