vue2 elememtUI 中Notification的自定义

遇到了一个需要使用Notification, 但是Notification 内需要自定义按钮,执行各自的方法

看了elementUI的文档,Element - The world's most popular Vue UI frameworkElement,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/notification支持html和VNode

dangerouslyUseHTMLString属性设置为 true,message 就会被当作 HTML 片段处理。设置html如下

this.$notify({
     title: '提示',
     dangerouslyUseHTMLString: true,
     position: 'top-left',
     message: `我是html测试</br> <span style="color:#F4494A">带颜色的span</span>`,
     duration: 0, // 设置0不会自动关闭
     offset: 50
})

而使用VNode,因为我内部需要用一个按钮关闭该Notification,而官方文档说

调用 Notification 或 this.$notify 会返回当前 Notification 的实例。如果需要手动关闭实例,可以调用它的 close 方法。

又是报错又是实现不了,几经波折最后搞出来了,代码如下

 

data() {
    return {
        arr: []
    }
},
methods: {
    setNotification(id) {
    const h = this.$createElement
    // 一定要写,不然报错h未定义,因为VNode是VUE的,而我们写的是JS
    var that = this
    const notification = this.$notify({
       title: '提示',
       dangerouslyUseHTMLString: true,
       position: 'bottom-right',
       message: h('p', null, [
          h('div', {
            class: 'margin-bottom-10'
          }, '提示语message'),
          h('div', {
            class: 'flex-end-center'
          }, [
            h('button', {
              on: {
                click: function() {
                  that.noDeal(id)
                }
              },
              class: 'el-button el-button--small'
            }, '暂不处理'),
            h('button', {
              on: {
                click: function() {
                  that.otherClick(id)
                }
              },
              class: 'el-button el-button--primary el-button--small'
            }, '其他点击')
          ])
        ]),
        duration: 0,
        offset: 50,
        customClass: 'reserve-notify',
        onClose: function() {
          that.deleteOneNotifications(id)
        }
      })
      this.arr.push({
        id: id,
        notification: notification // 将该vue对象存起来为了执行close方法
      })
    },
    otherClick(id) {
      this.noDeal(id) // 先关闭该弹框
      // 其他处理
    },
    noDeal(id) { // 点击不处理,关闭弹框,并且删除数组中对应的项
      const index = this.arr.findIndex(item => {
        return item.id=== id
      })
      if (index > -1) {
        this.arr[index].notification.close()
        this.arr.splice(index, 1)
      }
    },
    deleteOneNotifications(id) { 
      // 关闭该弹框会触发的方法,只要弹框关闭就会触发,我之前写错了,进入了死循环
      const index = this.arr.findIndex(item => {
        return item.id=== id
      })
      if (index > -1) {
        this.arr.splice(index, 1)
      }
    }
}

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
Vue2是一种被广泛使用的JavaScript框架,它提供了一些方便的功能来简化开发人员的工作。其,使用render函数自定义组件是Vue2非常强大的一个功能。render函数是一种能够将虚拟DOM转换为实际DOM的函数。通过使用render函数,您可以自定义组件并控制其整个生命周期。以下是Vue2使用render自定义组件的步骤: 第一步,导入Vue和render函数。您需要在组件导入Vue和渲染函数。 ``` import Vue from 'vue' import { render } from 'vue-server-renderer' ``` 第二步,定义组件。您需要定义一个组件,这个组件可以包含其他组件和HTML元素。在这里,我们将定义一个简单的组件。 ``` const HelloWorld = Vue.component('hello-world', { render() { return ( <div> <h1>Hello World</h1> </div> ) } }) ``` 第三步,渲染组件。您需要使用Vue的渲染函数将组件渲染到HTML。 ``` const app = new Vue({ render(h) { return h(HelloWorld) } }) const html = renderToString(app) console.log(html) ``` 第四步,使用组件。您可以在您的Vue应用程序使用这个组件,只需要像以下这样导入它。 ``` import HelloWorld from './HelloWorld.vue' export default { components: { HelloWorld } } ``` 通过这些简单的步骤,您可以使用Vue2的render函数来创建自定义组件,而无需使用Vue的模板语法。这种技术可以让您更加灵活地控制组件,并且可以让您更好地理解Vue的内部工作原理。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值