element的 Notification 通知组合 Drawer 抽屉 实现查看信息

一、将抽屉组件引入到页面中

 <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();
  },