一、将抽屉组件引入到页面中
<el-drawer
title="公告详情"
:visible.sync="drawer"
:direction="direction"
:before-close="handleClose"
:show-close="false"
>
<div>
<h2>{{ title }}</h2>
</div>
<div class="time">{{ updateTime }}</div>
<div v-html="content"></div>
<div class="btn">
<el-button type="primary" @click="submit">确定</el-button>
</div>
</el-drawer>
二、再data中定义数据
data(){
return {
drawer: false,
title: "", //标题
content: "", //正文
updateTime: "", //时间
id: "", //公告id
notifyTitle: "",
},
}
三、在methods中写一个方法在进入页面时Notification通知开启,message中的内容可自定义
点击查看详情抽屉开启,点击确定,抽屉关闭,通知关闭
methods: {
// 获取详情(调用的接口)
getInfo() {
getHomeShowDetail().then((res) => {
if (res.code == 0) {
this.id = res.data.id;
this.title = res.data.title;
this.updateTime = res.data.updateTime;
this.content = res.data.content;
this.notifyTitle = res.data.title;
}
});
},
// 公告
getAnnouncement() {
const h = this.$createElement;
this.$notify({
title: "系统公告:",
message: h(
"p",
{
style: "width:300px;line-height:50px;text-align:center;",
},
[
h(
"p",
{
style: "line-height:20px;padding-right:15px;",
},
this.notifyTitle
),
h(
"el-button",
{
style: "width:120px;",
on: {
click: this.lookInfo,//点击查看详情的方法
},
},
"点击查看详情"
),
]
),
duration: 0,//显示时间, 毫秒。设为 0 则不会自动关闭
offset: 50,//偏移的距离
showClose: false,//是否显示关闭按钮
});
},
}
// 查看详情
lookInfo() {
this.drawer = true;//抽屉开启
},
// 查看详情确定
submit() {
this.drawer = false;
this.$notify.closeAll();
},
// 离开此页面销毁公告弹窗(进入其他页面不在显示)
destroyed() {
this.$notify.closeAll();
},