Vue extend 自定义组件笔记
一直依赖都在用element-ui,过分依赖别人造的轮子,用起来着实舒服。但是似懂非懂的状态,遇到点问题直接憋出内伤!!!学习一下extend,搞一个全局的提示组件,做好笔记,防止以后用得到的时候犯傻!
components目录下新建message文件夹,如下:
components-
-- message/
-- message.vue
-- index.js
message.vue文件:
<template>
<transition v-if="show">
<div class="app_message">
<div class="tip" v-if="type == 'tip'">
<span>{{message}}</span>
</div>
<div class="message" v-if="type != 'tip'">
<i class="mshome" :class="icon"></i>
<p>{{message}}}</p>
</div>
</div>
</transition>
</template>
<script>
export default {
data (){
return {
show: false,
type: 'tip', // tip = 轻提示,success = 成功,error = 错误,warn = 警告
icon: '',
message: ''
}
},
mounted (){
let that = this;
let timer = setTimeout( ()=>{
that.show = false;
}, 2000)
}
}
</script>
<style lang="less" scoped>
.app_message{
width: 100%;
position: fixed;
top: 25%;
z-index: 9999;
text-align: center;
.tip{
display: inline;
font-size: 1.4rem;
background: rgba(0, 0, 0, 0.7);
padding: 0.7rem 4rem;
border-radius: 0.3rem;
span{
color: #FFFFFF;
}
}
}
</style>
index.js文件:
import Vue from 'vue'
import message from './message.vue'
// 初始化
const MessageTemplate = Vue.extend(message);
const messageItem = (options = {}) => {
options.show = true;
// 创建实例
const vm = new MessageTemplate({
data: options // 这个data = 组件里的data
})
// 挂载到 $mount
vm.$mount()
// 输出到body里
document.body.appendChild(vm.$el)
return vm
}
export default messageItem
然后,在vue入口main.js里面引入并挂载message:
import message from './components/message/index.js'
Vue.prototype.$message = message
完成以后,就可以在全局调用message组件,:
this.$message({
message: 'ss',
})