《toast轮子》

aq82041
787 阅读2分钟

具体实现：用户点击一个按钮，就能像面包机一样在页面的上/下/中间弹出一个div，里边有文字。

1. 使用Vue插件

怎么让用户点击一个按钮，就能弹出一个Toast组件的样式呢？正确做法是使用Vue的插件

使用插件

通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

new Vue({
  // ...组件选项
})

这句话的意思是，假设我自定义了一个插件MyPlugin，那么用户要使用这个插件，就必须通过use方法，Vue.use(MyPlugin) ，这句话会调用MyPlugin.install(Vue)

那install又是什么呢？

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

也就是说：我们自定义的插件MyPlugin必须有一个install方法，它接收Vue和options作为参数，在这个install函数里，就可以添加一些方法。在我们的toast轮子里，就要把Toast组件变成this.$toast()方法去使用。所以我们就可以在install里的4添加实例方法，$toast。

2. 创建插件

新建一个plugin.js

import Toast from "./Toast";

export default{
    install(Vue,options){
        Vue.prototype.$toast=function(message){
            let Constructor=Vue.extend(Toast)
            let toast=new Constructor()   //创建一个toast组件
            toast.$slots.default=message    //把信息放到插槽里
            toast.$mount()                  //挂载
            console.log(toast.$el);
            document.body.appendChild(toast.$el) //把toast组件放进页面
        }
    }
}

这个文件默认导出一个对象，对象里有一个install方法，在install方法里给Vue的原型上添加一个$toast方法。我们导出的这个对象就是一个插件。添加的这个$toast 就是用户想要弹出吐司时会调用的函数，所以在这个函数里，我们应该做些什么呢？

最简单的就是alert弹出一个对话框，但是太丑了。如果不是在Vue里，可以很简单的通过createElement innerText appendChild 等一系列方法创建一个div，给div写入文本，把div插入页面显示。但是这样做Vue就没有用处了。

合适的做法应该是动态创建组件。引入Toast组件。通过Vue.extend()搞一个构造函数出来，然后创建一个实例toast。如果在Vue里，就通过上边的模板创建一个组件，而不是像DOM API那样创建一个div

// Toast.vue
<template>
    <div class="toast">
        <slot></slot>
    </div>
</template>

<script>
    export default{
        name:'Toast',
    }
</script>

这样我们就把Toast组件，挂载到页面上了。实现用户点击一个按钮，就弹出Toast组件的html。然后文本就会放在插槽里。

3. 使用

在 其他文件里使用

import plugin from './plugin.js'

Vue.use(plugin)

导入的plugin就是导出的那个对象，然后用Vue.use()使用这个插件，就相当于调用这个对象里的install方法。就会给vue实例添加一个$toast方法。然后我在其他地方，就可以通过this.$toast() 调用这个方法。

avatar
文章
阅读
粉丝