vue2和vue3的全局组件封装

vue2的组件封装

vue2封装组件是基于Vue.extend的封装

新建index.js和toast.vue文件

index.js入口文件

	
import toastComponent from './toast.vue'
import Vue from 'vue'
let instance;
const toast = function(text) {
  if(instance) {
    instance.text = text;
    instance.show()
    return
  }
  const toastFn = Vue.extend(toastComponent)
  instance = new toastFn({
    propsData:{
      text:text
    }
  })
  instance.$mount(document.createElement('div'))
  document.body.appendChild(instance.$el)
}

export default toast

toast.vue组件内容

<template>
  <div v-show="isshow" class="toast">{{ text }}</div>
</template>

<script>
export default {
  props:{
    text:{
      type:String,
      default:""
    }
  },
  data() {
    return {
      isshow:false,
      timeid:null
    }
  },
  mounted() {
    this.show()
  },
  methods:{
    show() {
      this.isshow=true;
      clearTimeout(this.timeid);
      this.timeid = setTimeout(() => {
        this.isshow=false;
      }, 3000)
    }
  }
}
</script>

<style lang="less" scoped>
.toast{
    position: fixed;
    width: 3.6rem;
    line-height: 0.6rem;
    text-align: center;
    left: 50%;
    bottom: 1rem;
    margin-left: -1.8rem;
    color: #ffffff;
    font-size: 0.28rem;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}
</style>

vue2的使用方法

可以直接挂载到全局，每个页面的this可以直接用

import toast from "@/component/toast"

Vue.prototype.$toast= toast;

也可以在每个页面需要的时候，再加在

import toast from "@/component/toast"

toast('弹窗')

vue3的组件封装

由于vue3取消了extend，所以如果想获取组件的$el需要换个写法

index.js入口文件

import toastComponent from "./toast.vue";
import { createApp } from "vue";
let instance;
const toast = function(text) {
  if (instance) {
    instance.text = text;
    instance.show();
    return;
  }
  instance = createApp(toastComponent).mount(document.createElement("div"));
  instance.text = text;
  document.body.appendChild(instance.$el);
};

export default toast;

toast.vue插件内容

<template>
  <div v-show="isshow" class="toast">{{ text }}</div>
</template>

<script>
import { toRefs, reactive } from "vue";
export default {
  props: {
    text: {
      type: String,
      default: ""
    }
  },
  setup(props) {
    let state = reactive({
      text: props.text,
      isshow: true
    });
    let timeid = null;

    function show() {
      state.isshow = true;
      clearTimeout(timeid);
      timeid = setTimeout(() => {
        state.isshow = false;
      }, 3000);
    }
    show();
    return {
      ...toRefs(state),
      show
    };
  }
};
</script>

<style lang="less" scoped>
.toast {
  position: fixed;
  width: 360px;
  line-height: 60px;
  text-align: center;
  left: 50%;
  top: 100px;
  margin-left: -180px;
  color: #ffffff;
  font-size: 16px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
</style>

vue3的组件使用方法

可以按需使用，跟vue2的使用方法一样

也可以全局挂载

const app = Vue.createApp({})

app.config.globalProperties.toast = toast

但这仅限于使用options API

如果使用 Composition API

官方还是推荐使用 provide 和 inject 方式