vue3Arco Notification组件的自定义内容，全局弹窗

最新推荐文章于 2024-09-14 16:14:49 发布

qq_46053295

最新推荐文章于 2024-09-14 16:14:49 发布

阅读量335

点赞数 10

文章标签： vue.js 前端 javascript arco design

本文链接：https://blog.csdn.net/qq_46053295/article/details/142166413

版权

arco Notification组件的自定义节点内容render-content，以及底部自定义内容

发现网上关于这个组件库的相关内容都好少

安装arco：

npm install --save-dev @arco-design/web-vue

先引入需要的组件：

import { Notification, Button } from '@arco-design/web-vue'
import { IconCloseCircle } from '@arco-design/web-vue/es/icon'
import { ref, reactive, h } from 'vue'

先简单定义一个对象如果这些能够满足你的需求就可以直接用了

Notification.info
Notification.success
Notification.warning
Notification.error

const toastData = reactive({
    type: '',
    id: '',//唯一id
    title: 'Notification',标题
    content: 'This is a notification!',内容
    closable: true,是否可关闭
    onClose: () => {},
    icon: () =>  //如果官方提供的四种icon消息类型无法满足可以自定义设置的icon
      h('img', {
        src: tz, // 设置图片链接
        alt: 'Image', // 设置图片描述
        width: '25',
      }),
    position: 'bottomRight',//设置弹出的位置，我这里在系统的右下角弹出
    duration: 9999 * 9999,//停留时长
    footer: () => {  //底部的内容，2.25.0版本以上才有的，使用的是RenderFunction
      return h('div', [
        h(
          Button,
          {
            type: 'text',
            size: 'small',
            onClick: handlerCheck,
          },
          '立即查看'
        ),
      ])
    },
  })

动态渲染的消息弹窗

const  infoList=ref([]) //消息列表
infoList.value.forEach((item: any, index) => {
        toastData.title = item.title
        toastData.content = item.text
        toastData.id = item.id
        toastData.onClose = async(e) => {
            //删除弹窗的方法，可以做一些操作交互等
          console.log(e)//返回的是id
        }
        toastData.icon = () =>
          h('img', {
            src:
              item.type === 'ACTIVITY'
                ? hd
                : item.type === 'REMIND'
                ? tx
                : item.type === 'DIALOG'
                ? tw
                : tz,
            alt: 'Image',
            width: '30',
          })
        toastData.footer = () => {//底部可以加节点，我这里加的是按钮
          return h('div', [
            h(
              Button,
              {
                type: 'text',
                size: 'small',
                onClick: () => {

                  Notification.remove(item.id)
                },
              },
              '立即查看'
            ),
          ])
        }
        Notification.info(toastData)    //弹出弹窗
      })