ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2020-06-24 13:05:00  阅读:258  来源: 互联网

标签:el notice Vue return content props 组件 全局


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
   })

 

没有了!!!

    

标签:el,notice,Vue,return,content,props,组件,全局
来源: https://www.cnblogs.com/heshuaiblog/p/13187000.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有