有次开发想用element消息提示组件,但用不上其他组件就不想引入element,于是就自己写了。
官网有开发插件的方法:https://cn.vuejs.org/v2/guide/plugins.html
1、文件目录
2、message.vue
<template>
<transition name="fade">
<div class="message" :class="type" v-if="visible">
<img src="../../assets/message-error.png" v-if="type=='error'" class="icon-type iconfont" :class="'icon-'+type">
<img src="../../assets/message-success.png" v-if="type=='success'" class="icon-type iconfont" :class="'icon-'+type">
<img src="../../assets/message-warning.png" v-if="type=='warning'" class="icon-type iconfont" :class="'icon-'+type">
<img src="../../assets/message-info.png" v-if="type=='info'" class="icon-type iconfont" :class="'icon-'+type">
<p class="content">{{content}}</p>
<img src="../../assets/common-delete.png" v-if="hasClose" class="btn-close icon-close" @click="visible=false">
</div>
</transition>
</template>
<script>
export default {
name: "message",
data() {
return {
content: '',
time: 3000,
visible: false,
type:'',//'success','warning','error','info'
hasClose:false,
}
},
mounted() {
this.close()
},
methods: {
close() {
window.setTimeout(() =>{
this.visible = false
}, this.time);
}
}
}
</script>
<style scoped>
.message {
min-width: 350px;
box-sizing: border-box;
border: 1px solid #EBEEF5;
position: fixed;
left: 188px;
top: 20px;
transform: translateX(-50%);
background-color: #edf2fc;
transition: opacity .3s,transform .4s,top .4s;
padding: 15px 15px 15px 20px;
display: flex;
align-items: center;
border-radius: 4px;
overflow: hidden;
}
.error {
background-color: #fef0f0;
border-color: #fde2e2;
}
.iconfont{
margin-right: 10px;
}
.message p {
margin: 0;
}
.content {
padding: 0;
font-size: 14px;
line-height: 1;
}
.error {
color: #F56C6C;
background-color: #fef0f0;
border-color: #fde2e2;
}
.warning {
background-color: #fdf6ec;
border-color: #faecd8;
color: #E6A23C;
}
.success {
color: #67C23A;
background-color: #f0f9eb;
border-color: #e1f3d8;
}
.info {
color: #909399;
}
.btn-close {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
cursor: pointer;
color: #C0C4CC;
font-size: 16px;
}
[class*=" icon-"], [class^=icon-] {
width: 16px;
}
.el-message.is-closable .el-message__content {
padding-right: 16px;
}
</style>
3、index.js
判断参数,使用$ mount()给组件手动挂载参数,然后将组件插入页面中
import Vue from 'vue'
import Message from './Message.vue'
const messageBox = Vue.extend(Message)
Message.install = function (options, type) {
if (options === undefined || options === null) {
options = {
content: ''
}
} else if (typeof options === 'string' || typeof options === 'number') {
options = {
content: options
}
if (type != undefined && options != null) {
options.type = type;
}
}
let instance = new messageBox({
data: options
}).$mount()
document.body.appendChild(instance.$el)
Vue.nextTick(() => {
instance.visible = true
})
}
// 导出组件
export default Message
4、在main.js里全局引入
给Vue添加$ my_message方法
import Message from '@/components/message'
Vue.prototype.$my_message = Message.install;
5、在页面中调用
this.$my_message({
content:'请选择地点',
time:3000,
type:'error',
hasClose:false
});
6、参数
content: 提示内容
time: 显示时间,单位毫秒
type:消息类型,‘success’,‘warning’,‘error’,‘info’
hasClose:是否显示关闭按钮