html提示三条消息,element ui中,Notification组件中消息提示语,如何添加点击事件?...

在一个通知消息中,效果是这样

a3e691f854ee9ea07cf4740a81b701fd.png

代码

getAibmsWebsocket() {

this.$global.wsAibms.onmessage = res => {

console.log(res.data)

this.$notify({

title: '告警',

dangerouslyUseHTMLString: true,

message: '

有一条新告警产生,请前往查看

',

type: 'warning'

})

}

},

请问如何在查看这个span标签添加点击事件,并把这个res.data数据绑定上去?我用过在标签直接添加@click的方法,但是没有效果,请问这个要如何处理?

回答

this.$global.wsAibms.onmessage = res => {

console.log(res.data);

const notify = this.$notify({

title: '告警',

dangerouslyUseHTMLString: true,

message: '

有一条新告警产生,请前往查看

',

type: 'warning',

});

notify.$el.querySelector('span').onclick = () => {

// your code

// 点击后关闭notify 不需要的话可删掉

notify.close();

};

};

提供了onClick选项可以传入回调函数的,再根据event.target判断点击的元素即可。

如何不在意点击的元素,其实可以直接在notify上绑定点击事件

// clickMsg是定义的点击事件

this.$notify({

title: '告警',

dangerouslyUseHTMLString: true,

message: '

有一条新告警产生,请前往查看

',

type: 'warning',

onClick: this.clickMsg

})

如果只有点击span标签,就可以同楼上回答一样,赋值给变量后,找到他下面的元素$el,然后绑定事件

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 您可以使用 Element UI 的 $notify 方法的 position 属性来设置提示框的位置。例如,将 position 属性设置为 "top-right" 可以使提示框在屏幕正上方弹出。具体代码如下: this.$notify({ title: '提示', message: '这是一条提示信息', type: 'success', position: 'top-right' }); ### 回答2: 在Element UI,this.$notify是用于弹出通知提示框的方法。默认情况下,通知框会在屏幕的右下角弹出。如果要将通知框弹出到屏幕的正上方,则需要通过一些样式修改来实现。 首先,可以通过覆盖Element UI的默认样式来修改通知框的位置。在项目的样式文件,可以添加如下的CSS代码: .el-notification { top: 0; right: 50%; transform: translateX(50%); } 这段代码将通知框的位置设置在屏幕的正上方央。其,top属性设置为0,表示距离屏幕顶部的距离为0;right属性设置为50%,表示通知框右边距离屏幕右边的距离为屏幕宽度的一半;transform属性以translateX函数为参数,将通知框从右边移动到屏幕央。 除了修改CSS样式,还可以通过设置Element UI的全局配置项来实现通知框在屏幕正上方弹出。在项目的入口文件(通常是main.js),可以添加如下代码: import { Notification } from 'element-ui'; Notification({ position: 'top-right', offset: 0 }); 这段代码通过position属性将通知框的位置设置为屏幕的正上方,使用top-right值表示右上角。通过offset属性设置通知框的垂直偏移量为0,即距离屏幕顶部的距离为0。 以上就是在Element UI将this.$notify提示框弹出到屏幕正上方的方法。通过修改CSS样式或设置全局配置项,可以实现通知框的自定义位置。 ### 回答3: 在Element UI,使用this.$notify提示框在屏幕正上方弹出,可以通过设置position的属性来实现。默认情况下,Element UI的this.$notify提示框是在右上角弹出的,可以使用position属性将其调整到屏幕正上方。 具体的操作步骤如下: 1. 在调用this.$notify方法时,传入一个对象作为参数。例如:this.$notify({})。 2. 在该对象,使用position属性来设置消息框的位置。可以将position属性的值设为"top-center",以实现在屏幕正上方弹出。 示例代码如下所示: ``` this.$notify({ position: 'top-center', // 其他属性设置... }) ``` 通过以上设置,调用this.$notify提示框时,即可实现消息框在屏幕正上方弹出的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值