- 创建项目, 安装项目并启动项目
vue init webpack vue-ui
cd vue-ui
cnpm install
npm run dev
- 项目文件夹结构
- 在src中新建插件文件夹UI-Plugin,放置我们创建的插件,结构如下:
其中:
UI-Plugin --> message 放置message组件
UI-Plugin --> index.js 为所有插件的出口
4. 实现message组件,实现功能以及动画
<template>
<transition name='fade'>
<div class="ui-message" v-if="show">
{{text}}
</div>
</transition>
</template>
<script>
export default {
data () {
return {
show: false
}
},
props: {
text: {
type: String,
default: 'message context'
}
},
watch: {
// 自动关闭
show (val, oldVal) {
if (val) {
setTimeout(() => {
this.show = false
}, 3000)
}
}
}
}
</script>
<style scoped>
.ui-message {
position: fixed;
left: 50%;
top: 0;
z-index: 999;
transform: translate(-50%, 0);
padding: 8px 15px;
min-width: 200px;
text-align: center;
box-shadow: 0 5px 20px #ddd;
background-color: white;
}
.fade-enter {
opacity: 0;
transform: translate(-50%, -30px);
}
.fade-enter-active {
transition: all .5s;
}
.fade-enter-to {
opacity: 1;
transform: translate(-50%, 0);
}
.fade-leave {
opacity: 1;
transform: translate(-50%, 0);
}
.fade-leave-active {
transition: all .5s;
}
.fade-leave-to {
opacity: 0;
transform: translate(-50%, -30px);
}
</style>
- 创建插件,在index.js中添加$message全局方法
import Message from './message/index.vue'
export default {
install (Vue, options) {
Vue.prototype.$message = function (opts) {
// 继承Message组件
const MessageConstructor = Vue.extend(Message)
// 创建一个新元素
const messageWrap = document.createElement('div')
messageWrap.className = 'message-wrap'
// 实例化Message组件,并将组件挂在到新创建的messageWrap元素上
const messageInstace = new MessageConstructor({
el: messageWrap
})
// 或者使用 messageInstace.$mount(messageWrap)挂载
document.body.appendChild(messageInstace.$el)
// 显示组件内容
if (opts && opts.text) {
messageInstace.text = opts.text
}
messageInstace.show = true
}
}
}
- 在项目的入口文件main.js中引入插件
- 至此我们可以在项目中任何组件中调用该插件中的方法和组件了
该插件功能较简单,重在说明插件的开发过程,更多详细的内容,请移步官网