vue组件化

import vue from 'vue'

// 这里就是我们刚刚创建的那个静态组件
import toastComponent from './toast.vue'
// 返回一个 扩展实例构造器
const ToastConstructor = vue.extend(toastComponent)
    // 定义弹出组件的函数 接收2个参数, 要显示的文本 和 显示时间
function showToast(text, duration = 2000) {
    // 实例化一个 toast.vue
    const toastDom = new ToastConstructor({
        el: document.createElement('div'),
        data() {
            return {
                text: text,
                show: true
            }
        }
    })

    // 把 实例化的 toast.vue 添加到 body 里
    document.body.appendChild(toastDom.$el)

    // 过了 duration 时间后隐藏
    setTimeout(() => { toastDom.show = false }, duration)
}




import Pagination from './Pagination.vue'
const pagination = {
    install: function(Vue) {
        Vue.component('vPagination', Pagination)
    }
};
// 这里的判断很重要
if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(pagination)
}
export default pagination





// 注册为全局组件的函数
function registryToast() {
    // 将组件注册到 vue 的 原型链里去,
    // 这样就可以在所有 vue 的实例里面使用 this.$toast()
    vue.prototype.$toast = showToast
}
export default registryToast


// 使用这个插件
import toastRegistry from './toast/index'

// 这里也可以直接执行 toastRegistry()
Vue.use(toastRegistry)