vue项目中仿element-ui弹框效果的实例代码

background-size: auto 100%;
}
&.icon-warning{
background: url("../../../assets/image/icon-warning.png") no-repeat center center;
background-size: auto 100%;
}
}
.message-success{
background: #f2f8ec;
border-color: #e4f2da;
.message-content{
color: #7ebe50;
}
}
.message-error{
background: #fcf0f0;
border-color: #f9e3e2;
.message-content{
color: #e57470;
}
}
.message-warning{
background: #fcf6ed;
border-color: #f8ecda;
.message-content{
color: #dca450;
}
}
.message-info{
background: #eef2fb;
border-color: #ebeef4;
.message-content{
color: #919398;
}
}
.message-fade-enter,
.message-fade-leave-active {
opacity: 0;
transform: translate(-50%, -100%);
}
</style>

以上就是封装的所有代码
 接下来就来看看如何引用

main.js中引入

import Message from ‘@/components/message/index.js’

Vue.prototype.$message = Message

调用

在你需要的页面调用

this.$message({
  message: '提示消息',
  type:'error' //type有四个值 1.error 2.success 3.info 4.warning
});

type为success

type为warning

type为info

type为errpr

小icon的图片用自己的图片哦

总结

以上所述是小编给大家介绍的vue项目中仿element-ui弹框效果的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！