notify入门学习
知识点
title
设置通知标题message
设置通知内容dangerouslyUseHTMLString
设置message
可解析HTML
标签showClose
控制关闭按钮显示type
设置通知的类型,可设置error,warning,info,success
position
设置通知出现的位置,可设置top-right,bottom-right,top-left,bottom-right
offset
设置偏移量duration
设置通知的显示时间,0为不关闭
效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d6bc5f98c70003a0fc263745a6f871b5.png)
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id='app'>
<el-button @click='handleNotify'>通知按钮</el-button>
</div>
</body>
</html>
<script>
new Vue({
el:"#app",
data(){
return{
}
},
methods:{
handleNotify(){
this.$notify({
title:'通知',
dangerouslyUseHTMLString:true,
message:'<i>灰化肥挥发会发黑</i>',
duration:0,
type:'error',
position:'bottom-right',
offset:200,
showClose:true
})
}
}
})
</script>
官网
notify学习官网