vue 的插件封装方式

我们这里以 封装 Toast 插件为例

1. 创建目录结构

└── components
 └── toast
  ├── Toast.vue
  └── index.js
创建一个 toast 的文件夹，里面包含 Toast.vue 和 index.js

<!-- Toast.vue -->
<template>
  <div class="toast" v-show='isshow'>
    <div>{{message}}</div>
  </div>
</template>

<script>
export default {
  name: 'Toast',
  data(){
    return {
      message: '',
      time: 2000,
      isshow: false
    }
  },
  methods: {
    show (message, time=1000) {
      this.isshow = true
      this.message = message
      setTimeout(() => {
        this.isshow = false
        this.message = ''
      }, time)
    }
  }
}
</script>

<style>
  .toast {
    position: fixed;
    top: 50%;
    left: 50%;
    padding: 8px 10px;
    border-radius: 4px;
    transform: translate(-50%, -50%);
    color: #fff;
    background-color: rgba(0,0,0,.8);
    z-index: 999;
  }
</style>

import Toast from './Toast.vue'

const obj = {}

obj.install = function (Vue) {
  // 1. 创建组件构造器
  const toastConstructor = Vue.extend(Toast)

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

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

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

  Vue.prototype.$toast = toast
}

export default obj

2. 安装组件

// main.js
import Toast from '@/components//toast/index.js'

Vue.use(Toast)

3. 使用

在其他组件中可以 直接通过 $toast 使用插件

<template>
  <div id="app">
    
    <img src="@/assets/logo.png" alt="" @click="showToast">

  </div>
</template>

<script>
export default {
  methods: {
    showToast(){
      this.$toast.show('hello Vue', 2000)
    }
  }
};
</script>

📺-bilibili视频链接