antd vue message提示自定义删除按钮

最新推荐文章于 2024-07-09 13:38:35 发布

汤姆丁1111

最新推荐文章于 2024-07-09 13:38:35 发布

阅读量353

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_53841730/article/details/131787023

版权

该代码段定义了一个名为`showAlert`的函数，用于在PC和App端展示不同类型的提示信息，包括成功、警告、错误和信息。函数接受类型、内容和时间参数，创建包含删除按钮的提示框，并根据设备类型决定是否显示。提示信息会在设定的时间后自动消失。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


// 通用提示信息--带删除
/**
 *
 * @param type 提示信息类型 showAlert
 * @param content 提示信息内容
 * @param time 提示信息时间，单位s，若为0则不会消失
 */
export function showAlert({
  type,
  content,
  time = 3
}: {
  type: string
  content: string
  time?: number
}) {
  // pc增加删除按钮
  let innerText = h('span', { style: {} }, content)
  let innerIcon = createVNode('i', {
    class: 'icon-guanbi_close',
    style: {
      marginRight: '0px',
      marginLeft: '8px',
      color: isMobile() ? '#fff' : '#ccc',
      cursor: 'pointer',
      fontSize: '12px'
    },
    attrs: { type: 'close' },
    onclick: (e: any) => {
      if ((_.get(e, 'target.__vnode.type', '') as string) == 'i' && !isMobile()) {
        messageRef.value()
      }
    }
  })
  let container = h('span', {}, [innerText, innerIcon])

  // app增加删除按钮
  let innerTextApp = h(
    'span',
    { style: { textAlign: 'left', width: '90%', display: 'inline-block' } },
    content
  )
  let innerIconApp = createVNode(
    'i',
    {
      class: 'icon-guanbi_close',
      style: {},
      attrs: { type: 'close' }
    },
    (onclick = (e: any) => {
      if ((_.get(e, 'target.__vnode.type', '') as string) == 'i' && isMobile()) {
        closeNotify()
      }
    })
  )
  let containerApp = h('span', { style: { width: '100%' } }, [innerText, innerIcon]) as any

  const messageRef = ref()

  switch (type) {
    case 'success':
      if (isMobile()) {
        showNotify({ type: 'success', message: containerApp, duration: time * 1000 })
      } else {
        messageRef.value = message.success(container, time)
      }
      break
    case 'warning':
    case 'warn':
      if (isMobile()) {
        showNotify({ type: 'warning', message: containerApp, duration: time * 1000 })
      } else {
        messageRef.value = message.warning(container, time)
      }
      break
    case 'error':
      if (isMobile()) {
        showNotify({ type: 'danger', message: containerApp, duration: time * 1000 })
      } else {
        messageRef.value = message.error(container, time)
      }
      break
    case 'info':
      if (isMobile()) {
        showNotify({ type: 'primary', message: containerApp, duration: time * 1000 })
      } else {
        messageRef.value = message.info(container, time)
      }
      break
    default:
      if (isMobile()) {
        showNotify({ type: 'primary', message: containerApp, duration: time * 1000 })
      } else {
        messageRef.value = message.info(container, time)
      }
  }
}