模仿vant自己开发注册组件以及插件的使用

toast插件方法和vue install方法的使用

vue-cli环境下在根目录下创建componets文件夹，并在文件夹下创建三个文件

--components
----custtoast.vue
----stepper.vue
----index.js  // 该文件用来引入其他组件，并在全局vue中注册

toast组件

<template>
  <div class="toast__body">
      
      <transition name="fadein">
          <div class="toast" v-if="isshow">
            <img src="http://bpic.588ku.com/element_origin_min_pic/01/30/77/88573b2346b359f.jpg" alt="" v-if="type == 'success'">
            <img src="http://bpic.588ku.com/element_origin_min_pic/01/39/62/29573cca228cd76.jpg" alt="" v-else-if="type == 'fail'">
            <p> {
    { message }}  p>
          div>
      transition>
  div>
template>

<script>
export default {
      
    data () {
      
        return {
      
            message: '',
            type: '',
            isshow: false
        }
    }
}
script>

<style lang="less" scoped>
// 对路由或者其他组件同样适用
.fadein-enter-active, .fade-leave-active {
      
    transition: opacity .3s;
}
.fadein-enter, .fadein-leave-to {
      
    opacity: 0;
}
.toast__body {
      
    display: flex;
    align-items: center;
    justify-content: center;
    .toast {
      
        position: fixed;
        padding: 25px 50px;
        background-color: rgba(0,0,0,.8);
        z-index: 999;
        text-align: center;
        img {
      
            width: 50px;
            margin-bottom: 10px;
        }
        p {
      
            font-size: 20px;
            color: #fff;
        }
    }
}

style>

stepper.vue组件

<template>
    <div>
        <div class="stepper__main">
            <button class="stepper__main-add" @click="addSteppernum">+button>
            <input type="text" v-model="num">
            <button class="stepper__main-cut" @click="cutSteppernum">-button>
        div>
    div>
template>

<script>
export default {
      
    name: 'stepper',
    // 接收父组件中传来的值
    props: {
      
        propvalue: {
      
            type: Number,
            // 如果传值为空，默认为0
            default: 0
        }
    },
    data () {
      
        return {
      
            num: null
        };
    },
    created () {
      
        const _this = this
        // props接收的值赋值给子组件内部的值
        _this.num = this.propvalue
    },
    methods: {
      
        // 不能在子组件中修改父组件的值
        cutSteppernum () {
      
            if (this.num === 0) {
      
                return
            }
            this.num = --this.num
            // 组件之间传值。子传父
            this.$emit('emitStepper', this.num)
        },
        addSteppernum () {
      
            this.num = ++this.num
            this.$emit('emitStepper', this.num)
        }
    }
}

script>
<style lang='less' scoped>
@background: #ccc;

.stepper__main {
      
    position: relative;
    width: 500px;
    height: 200px;
    margin: 0 auto;
    top: 50px;
    input {
      
        display: inline-block;
        box-sizing: border-box;
        padding-left: 20px;
        width: 200px;
        height: 50px;
        margin: 0 20px;
        font-size: 24px;
    }
    button {
      
        appearance: none;
        width: 50px;
        height: 50px;
        outline: none;
        cursor: pointer;
        font-size: 20px;
        border-radius: 10px;
        &:hover {
      
            color: rgb(119, 173, 245);
        }
    }
    .stepper__main-add {
      
        display: inline-block;

    }
}
style> 

注意必须在组件中定义属性name，后面注册组件时会根据组件名字注册组件，你在调用时也是根据组件名字组件调用

index.js注册组件和注册插件

import custtoast from './custtoast.vue'
import custstepper from './stepper.vue'

// 组件的注册
const custcom = {
     
    install (Vue) {
     
        let custcomponents = [custstepper]
        // 循环注册
        custcomponents.forEach(item => {
     
            Vue.component(item.name, item)
        })
    }
}

// 在vue上挂载方法
const toastcom = {
     
    install (Vue) {
     
        // 生成一个Vue的子类
        const toastcomconstructor = Vue.extend(custtoast)
        // 生成一个该子类的实例
        const instance = new toastcomconstructor()
        // 将这个实例挂载在我创建的div上
        instance.$mount(document.createElement('div'))
        // 并将此div加入全局挂载点内部
        document.body.appendChild(instance.$el)
        // 通过Vue的原型注册一个方法
        // 让所有实例共享这个方法$fypop     // 其中的data是调用时传入的数据，duration是持续时间
        Vue.prototype.$fypop = (data, duration = 2000) => {
     
            // 如果传入的data是对象格式
            if (Object.prototype.toString.call(data) == "[object Object]") {
     
                instance.message = data.message
                instance.type = data.type
                instance.isshow = true
            } else if (typeof data == "string") {
     
                instance.message = data
                instance.isshow = true
            }
            // 一次性定时器，可以传入参数来让组件多长时间消失
            setTimeout(() => {
     
                instance.isshow = false
            }, data.duration ? data.duration : duration);
        }
    }
}

export {
      toastcom, custcom }

然后你就可以在main.js入口处引入并使用vue.use挂载引入的外部插件

import {
      toastcom, custcom } from './components/index'

Vue.use(toastcom)
// 会自动调用其中的install方法
Vue.use(custcom)

在其他的任何地方调用方法和这个组件

<stepper>stepper>


methods: {
	onclick () {
		this.$fypop()  // 参数可以传入string类型或object类型，object格式是{ message: '', type: '' }, 也可以，隔开传入第二个参数就是组件持续显示的时间
	}
}