<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
</head>
<body>
<div id="app">
<p onclick="myFun()">消息（自动消失、可关闭）</p>
<p onclick="myFun2()">成功（自动消失、可关闭）</p>
<p onclick="myFun3()">警告（自动消失、可关闭）</p>
<p onclick="myFun4()">错误（自动消失、可关闭）</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app'
})
function myFun() {
console.log('11111111');
vm.$message({
showClose: true,
message: '这是一条消息提示'
});
}
function myFun2() {
console.log('2222222');
vm.$message({
showClose: true,
message: '恭喜你，这是一条成功消息',
type: 'success'
});
}
function myFun3() {
console.log('3333333');
vm.$message({
showClose: true,
message: '警告哦，这是一条警告消息',
type: 'warning'
});
}
function myFun4() {
console.log('4444444');
vm.$message({
showClose: true,
message: '错了哦，这是一条错误消息',
type: 'error'
});
}
</script>
</html>Message 消息提示（elementUI）
猜你喜欢
转载自blog.csdn.net/jinjiankang/article/details/80864969
今日推荐
周排行