vue 中挂载一个全局组件,用组件构造器

效果

在这里插入图片描述

index.js

import Toast from "./Toast";

const obj = {}

obj.install = function (Vue) {

  // 1.创建组件构造器
  const toastContrustor = Vue.extend(Toast)

  // 2.new的方式,根据组件构造器,可以创建出来一个自建对象
  const toast = new toastContrustor()

  // 3.将组件对象,手动挂载到某一个元素上
  toast.$mount(document.createElement('div'))

  // 4.toast.$el 对应的就是div
  document.body.appendChild(toast.$el)

  // 5.挂载到Vue实例上,可以通过 this.$toast 访问属性,方法
  Vue.prototype.$toast = toast
}

export default obj    // 导出后,在main.js 中导入,并且注册

main.js

import Vue from 'vue'
import App from './App.vue'
import router from "./router";
import axios from 'axios'
import VueAxios from 'vue-axios'
import Vant from 'vant';
import VueLazyload from "vue-lazyload"
import store from "./store";
import toast from '../src/components/common/toast'

Vue.prototype.$bus = new Vue()
Vue.use(toast)  // 注册toast组件
Vue.use(Vant);
Vue.use(VueLazyload)
Vue.use(VueAxios, axios)

Vue.config.productionTip = false

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

Toast.js

<template>
  <div class="toast" v-show="isShow">
    <div>{{message}}</div>
  </div>
</template>

<script>
  export default {
    name: "Toast",
    props: {
    },
    data() {
      return {
        message: '',
        isShow: false
      }
    },
    methods: {
      /**
       * toast 组件的 show 方法 用来展示提示消息
       * @param message  展示的消息
       * @param duration  展示的时间
       */
      show(message="默认值", duration=1000) {
        this.isShow = true
        this.message = message
        setTimeout(() => {
          this.isShow = false
          this.message = ''
        }, duration)
      }
    }
  }
</script>

<style scoped>
  .toast {
    position: fixed;
    top: 50%;
    left: 50%;
    padding: 40px 10px;
    border-radius: 5px;
    transform: translate(-50%, -50%);
    color: white;
    background-color: rgba(100, 100, 100, .5);
    z-index: 99;
  }
</style>

效果

©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页