Vue挂在全局组件的两种方法

Posted 2020-12-12 heshuaiblog

1. 通过官方提供的一个全局api Vue.extend( options )

import Vue from ‘vue‘

export default (component, props) => {
  const conCtor = Vue.extend(component)

  const el = new conCtor({propsData: props}).$mount()

  document.body.appendChild(el.$el)

  conCtor.remove = () => {
    document.body.removeChild(el.$el)
    conCtor.$destroy()
  }

  return el
}

　　

2. 通过new 一个Vue对象，通过这个Vue对象的render函数帮我们渲染这个虚拟dom

import Vue from ‘vue‘

export const create = (component, props) => {
  const vm = new Vue({
    render(h) {
      return h(component, {props})
    }
  }).$mount()

  document.body.appendChild(vm.$el)

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

  return vm.$children[0]
}

　　

以上两个方法均为生成一个挂在全局组件的工厂函数，可通过该函数生成任何需要全局挂在的组件。现举一个栗子，开发一个提示框（notice）组件，并使用上述函数挂在全局。

 

1. 开发组件

<template>
  <transition name="notice">
    <div class="notice-wrapper" v-if="isShow">
      <div class="notice-content">
        <h5 class="header">{{title}}</h5>
        <div class="body">{{content}}</div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    }
  },

  props: {
    title: {
      type: String,
      default: ‘提示‘
    },

    content: {
      type: String,
      default: ‘‘
    },

    duration: {
      type: Number,
      default: 3000
    }
  },

  mounted() {
    this.isShow = true
  },

  created() {
    if (this.duration === 0) return

    this.timer = setTimeout(() => {
      this.isShow = false
    }, this.duration)
  },

  methods: {
    hide() {
      this.isShow = false
    }
  }
}
</script>

<style scoped lang="less">
.notice-wrapper {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: inherit;

  &::after {
    content: ‘‘;
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #eee;
    opacity: 0.1;
  }

  .notice-content {
    position: relative;
    box-sizing: border-box;
    width: 80%;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;
    background: #1989fa;
    color: #fff;
    box-shadow: 0px 0px 2px 2px #ccc;
    border-radius: 5px;

    .header {
      padding: 0 0 20px 0;
      margin: 0;
      font-size: 16px;
    }
  }
}

.notice-enter,
.notice-leave-to {
  opacity: 0;
}

.notice-enter-active,
.notice-leave-active {
  transition: opacity 0.5s;
}
</style>

2. 暴露组件挂载全局的注册方法install，以及便捷封装方法success以及fail

import NoticeComponent from ‘./Notice.vue‘

import createComponent from ‘../utils/create-component.js‘

export default {
  install(Vue) {
    Vue.prototype.createNotice = (props) => createComponent(NoticeComponent, props)
  },

  success(props) {
    props = Object.assign({title: ‘提示‘}, props)

    return createComponent(NoticeComponent, props)
  },

  fail(props) {
    props = Object.assign({title: ‘警告‘}, props)

    return createComponent(NoticeComponent, props)
  }
}

3. 组件使用

　　使用方式1：全局注册

//mian.js 注册
import Notice from ‘../packages/notice‘

Vue.use(Notice)

//任意组件页面使用
this.createNotice({
        title: ‘提示‘,
        content: ‘服务器错误‘,
        duration: 5000
      })

　　使用方式2：快捷方式使用

import Notice from ‘../packages/notice‘
Notice.fail({content: ‘服务器错误‘})

Notice.success({
    content: ‘操作成功‘,
    duration: 5000
   })

　

没有了！！！