编写一个右下角弹出提示的vue插件,以api的形式调用。
从构建出基础代码,计算出显示的位置;添加自动消失;消失后删除dom,vm对象;生成多个,删除某个,重新计算位置;鼠标聚焦不关闭,移出重新开始自动消失。
一步一步完善,优化功能。
在文件夹notification下新增一个notification.vue文件 编写基础代码
<template>
<transition name="fade">
<div class="notification">
<span class="container">{{content}}</span>
<a class="btn" @click.stop.prevent="handleClose">{{btn}}</a>
</div>
</transition>
</template>
<script>
export default {
name: 'notification',
props: {
content: {
type: String,
require: true
},
btn: {
type: String,
default: '关闭'
}
},
methods: {
handleClose (e) {
this.$emit('close')
}
}
}
</script>
在同级目录下新建index.js
import Notification from './notification.vue'
export default (Vue) => {
Vue.component(Notification.name, Notification)
}
在vue入口文件的index.js增加
import Notification from './components/notification'
Vue.use(Notification)
之后在页面的vue文件中增加
<notification content="test notification"></notification>
至此 组件初步搭建完成