关闭功能及如何处理多个通知

exprot default {
	data() {
     return {
	  //使用userNotifyId作为弹窗的key,用来获取弹窗的实例,以对对应弹窗进行操作
      notifications: {}
	 }
    },
	methods: {
    	// 打开一个新的通知
    	openNotify(userNotification) {
    	 // userNotification 中的userNotifyId是唯一的
    	 const h = this.$createElement
         let notify= this.$notify.success({
           title: data.notification.notifyName,
           dangerouslyUseHTMLString: true,
           position: 'bottom-right',
           message: h(
            'p',
            {
              // 相当于`v-bind:style`
              style: {
                color: 'red',
                fontSize: '14px'
              },
              class: 'pointer',
              on: {
                click: () => {
                  this.closeNotification(
                    data.notification.data.message,
                    data.userNotifyId,
                  )
                }
              }
            },
            data.notification.data.message
          ),
          duration: 60 * 1000
        })
        this.notifications[data.userNotifyId] = notify
     },
    
     //关闭单个通知
     closeNotification(message, id){
      this.notifications[id].close();
      delete this.notifications[id];
     },
    
     // 关闭所有通知
     closeAllNotification(){
      for (let key in this.notifications) {
        this.notifications[key].close();
        delete this.notifications[key];
      }
    }
   }
}
  
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐