阅读 4354
如何实现一个全局复用的自定义组件?

如何实现一个全局复用的自定义组件?

前言

组件在vue开发中是必不可少的,如果一个组件在多个页面中都需要使用,那么每次都要引入,注册,使用,还是有点繁琐的。所以对那些要频繁使用的我们要实现一次引入,全局使用。

本文就带你了解自定义一个全局复用的组件(Toast),在main.js中引用组件,以后只要在需要的页面上写一句js代码即可实现效果。

先看看效果

监听点击事件。

 methods: {
    click() {
      this.$toast.show("home你好啊")   //实现toast弹窗
    }
  }
复制代码

我们看看页面的结构

当我们点击按钮执行语句this.$toast.show("home你好啊"), 就会动态去除display:none; 默认信息也会改为我们调用show函数时传递的参数

我们要用到toast组件的时候,直接通过this.$toast调用show()方法,第一个参数是要显示的信息,第二参数是toast持续的时间(不传参数默认了1.5s)。

我们怎么将组件挂载到dom结构的呢?

简单来说就是用Vue.extend()创建一个子类,然后挂载到dom上。

需要用的Vue全局API

  1. Vue.use()官方文档
  2. Vue.extend()官方文档

一,封装一个Toast组件

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

<script>
export default {
  data() {
    return {
      message: '默认信息',
      isNone: false
    }
  },
  methods: {
    show(message='默认信息', duration = 1500) {  //默认参数
      this.message = message;
      this.isNone = true;
      setTimeout(() => {  //用定时器实现弹窗出现时间
        this.isNone = false;
        this.message = '默认信息'
      }, duration)
    }
  }
}
</script>

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

结构很简单,通过属性isNone来动态控制Toast的出现和隐藏。

主要是show方法,当页面调用show方法,第一个参数会赋值给message,第二个参数可以决定Toast存在的时间(用定时器将isNone改为false)。

二, 具体实现

main.js

import Toast from './components/toast/index'

Vue.use(Toast)  //安装toast插件
复制代码

看到这,首先我们要了解Vue.use这api具体做了啥?

其实就是调用插件的install方法().

安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。

所以现在就要封装install方法。

components/toast/index.js

import Toast from './Toast'

const obj = {}  //对象

obj.install = function(Vue) {  //封装install方法
  // 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.prototype.$toast = toast
  
}

export default obj
复制代码
  1. 先将封装好的Toast组件引入。
  2. 定义一个对象obj(将这个对象导出到main.js中安装)。
  3. 刚刚我们了解了Vue.use插件是一个对象的话,必须提供install方法,所以封装对象obj的install方法。
  4. const toastContrustor = Vue.extend(Toast)先通过Vue.extend创建组件构造器。(install方法调用时,会将 Vue 作为参数传入)

    使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。

  5. const toast = new toastContrustor();通过new的方式 根据组件构造器创建出来一个组件实例。
  6. toast.$mount(document.createElement('div'))将组件对象挂载到某一个元素上。
  7. document.body.appendChild(toast.$el);将元素添加到body中。
  8. Vue.prototype.$toast = toast将toast对象加入到Vue的原型链上,这样在每个页面都可以用this.$toast操作。
  9. 将obj对象导出,在main.js中引入,安装,然后就大功告成了,可以在全局中通过一句js代码使用。

最后

文章有错误的地方或者可以改进的地方,欢迎各位大佬提提意见。

这是源代码,如果本文对你有点帮助的话,不妨点个赞哦。

文章分类
前端
文章标签