模仿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: '' }, 也可以，隔开传入第二个参数就是组件持续显示的时间
}
}