vue进阶：弹窗类组件实现方式

弹窗类组件的特点

弹窗类组件的特点就是他们在当前的vue实例之外独立存在，通常挂载于body。他们是通过纯JS创建的，不需要在任何组件中声明。常见的食用方式是这样：

this.$create(Notice, {
	title: '标题标题', 
	message: '提示信息'
}).show();

分析实现思路

根据上面的实用方式，我们要想实现在vue组件中全局使用this.$create()方法，就需要将该方法赋值到vue的原型对象上。假设我们已经实现了create方法：

Vue.prototype.$create = create

分析下create函数，它接受两个参数，一个是组件配置对象，命名为Component，一个是参数属性，我们将他命名为props。要想将该组件配置对象挂载到body上，就需要构建Component实例，这样才能生成真实的dom节点。顺着这个思路，拿到真实的dom元素后，将该元素append到body上。再给其添加个remove方法，在移除的时候删除节点销毁自身，就大功告成了。

实现方式

借鸡生蛋式——借助Vue构造函数

在vue项目的main.js中，我们要想在body上挂载app组件，是这样写的：

new Vue({
  render: h => h(App)
}).$mount('#app')

这里的h就是createElement，它可以返回一个vnode即虚拟dom。$mount方法则可以将render函数中返回的vnode转化为真实节点，并挂载到目标元素上。需要注意一点：
$mount()是覆盖性操作。

所以我们在实现create时，不能够直接使用$mount(body),将真实节点挂载到body上。但是可以不设置挂载目标，这样依然可以转换vnode为真实节点。

所以我们也可以借助这种方式：

import Vue from 'vue'
export default function create (Component, props) {
  // 1. 构建Component的实例
  const vm = new Vue({
    render: (h) => {
      return h(Component, {props})
    }
    // 不能直接挂载在body节点上,因为$mount()是覆盖性操作.
  }).$mount()
  
  // 2.将真实节点挂载到body上，vm.$el是实例的真实节点。
  document.body.appendChild(vm.$el)

  // 3.获取组件实例
  const comp = vm.$children[0]

  comp.remove = () => {
    document.body.remove(vm.$el)
    vm.$destroy()
  }

  return comp
}

这样我们就是实现了create方法。我们写个例子来验证它：

// Notice组件

<template>
    <div v-if="isShow" class="modal">
        <div class="title">{{ title }}</div>
        <div class="content">{{ content }}</div>
    </div>
</template>

<script>
export default {
  name: 'Notice',
  props: {
    title: {
      type: String,
      default: '警告'
    },
    content: {
      type: String,
      default: '我是内容我是内容'
    }
  },
  data () {
    return {
      timerId: null,
      isShow: false
    }
  },
  methods: {
    show () {
      this.isShow = true
      setTimeout(() => {
        this.hide()
      }, 1500)
    },
    hide () {
      this.isShow = false
    }
  }
}
</script>

<style scoped>
.modal{
    position: relative;
    top: 50px;
    left: 50%;
    margin-left: -250px;
    width: 500px;
    border: 1px solid #f7f7f7;
    border-radius: 6px;
    padding: 10px;
    background-color: papayawhip;
    animation: disappear 2s ease-in-out;
}
.title{
    text-align: left;
    font-weight: 500;
    font-size: 14px;
}
.content {
    margin-bottom: 10px;
    font-size: 12px;
}

@keyframes disappear {
    0% {
        top: 60px;
        opacity: 1;
    }
    30% {
        top: 10px;
        opacity: 1;
    }
    96% {
      opacity: 0.20;
    }
    100% {
        top: 10px;
        opacity: 0;
    }
}
</style>

// index页面

<template>
    <div>
      <button @click="showNotice">提示弹窗</button>
    </div>
</template>

<script>
import Notice from './Source/NoticeModal/Notice.vue'
export default {
  name: 'Source',
  methods: {
    showNotice () {
      const notice = this.$create(Notice, {
        title: '测试标题',
        content: '我是内容内容呀呀呀'
      })
      notice.show()
    }
  }
}
</script>

效果：

来对比看下dom的渲染：

Vue.extends()方法

Vue.extends()方法可以使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。extend 创建的是 Vue 构造器，而不是我们平时常写的组件实例。

export default function create (Component, props) {
  // 1. 构建Component的实例
  const Ctor = Vue.extend(Component)
  
  // 2. 将props传递给创建的实例并挂载
  const vm = new Ctor({propsData: props}).$mount()

  // 将真实节点挂载到body上
  document.body.appendChild(vm.$el)
  
  vm.remove = () => {
    document.body.remove(vm.$el)
    vm.$destroy()
  }
  
  return vm
}

至此，一个纯js调用的弹窗类组件就完成了。参考文档：vuejs.org。

♡ ♡ ♡ ♡ ♡ ♡ 关注我，每日都有新收获！