element-UI组件notify多行以及按钮点击事件

西红柿又名小番茄

已于 2024-11-07 10:52:34 修改

阅读量295

点赞数 2

文章标签： ui javascript vue.js

于 2024-11-05 13:48:17 首次发布

本文链接：https://blog.youkuaiyun.com/qq_39293316/article/details/143506789

版权

代码如下：

let list = [
        {
          content: "第一行消息",
        },
        {
          content: "第2行消息",
        },
      ]
      let newData = []
      for (let i = 0; i < list.length; i++) {
        newData.push(h('p',{style: "margin-top:10px;"},list[i].content))   
      }
      let buttonObj = h('p',{style: "margin-top:10px;"},[
        h('el-button',{
            style: this.buttonColumnStyle,
            props: {
              size: "mini",
              type: "text",
            },
            on: {
              click: () => {
                console.log('点击事件')
              },
            },
          },
          ["立即查看"],
        )
      ])
      newData.push(buttonObj)  
      this.timerOut = setTimeout(() => {
        this.$notify({
          title: '标题',//消息标题
          message: h('div', { style: "white-space: pre-line;margin-top:10px;"}, newData),
          duration: 5000,
        })
      }, 0)

样式可以直接写在style里面，也可以写在computed里面

computed: {
    buttonColumnStyle() {
      return "margin-top:8px;text-align:right;"
    },
  },