naive ui的NPopconfirm组件在渲染函数h()中的用法

最新推荐文章于 2025-02-26 10:46:47 发布

Lee-j

最新推荐文章于 2025-02-26 10:46:47 发布

阅读量2k

点赞数 2

文章标签： javascript 前端 vue

本文链接：https://blog.csdn.net/leekuikui/article/details/126876400

版权

本文详细介绍了Popcomfirm组件的使用，包括正常情况下的应用和在渲染函数h()中的实现。通过PopconfirmProps和PopconfirmSlots定制弹窗样式和内容，例如设置按钮样式、触发事件及弹窗文字。示例代码展示了如何创建一个带有确认删除功能的弹窗，提供了一种在Vue中实现交互提示的解决方案。

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

1.PopComfirm简介

利用Popcomfirm可以很方便的加在按钮等需要点击事件的地方加入确认弹框。
PopComfirm弹窗

2.PopComfirm的正常使用

官网提供的Popcomfirm模板代码的使用方法。
PopComfirm使用示例

3.PopComfirm在渲染函数h()中的用法

在碰到需要利用h()函数时的情况时，如何使用PopComfirm。

3.1翻看官方文档

官方文档中提供了Popconfirm Props，Popconfirm Slots和Popconfirm Methods三个接口。
在Popconfirm Props可以修改PopComfirm的样式，Popconfirm Slots则为Popconfirm Props的插槽，有action、default和icon三个属性（不重要），可以在Popver中查看重要的属性。
其中trigger的说明为触发弹出信息的组件或元素，所以在这里可以放触发弹窗的按钮等元素。对footer、header和default进行设置可以更改弹窗头部，弹窗内容等信息。
因此渲染函数h()中使用NPopconfirm组件可以根据上述属性进行设置。
在这里插入图片描述

3.2代码

 return h(
      NPopconfirm,
      {
        positiveButtonProps: {
          size: 'tiny',
          color: '#007293',
          bordered: true,
        },
        negativeButtonProps: {
          size: 'tiny',
          color: '#007293',
          bordered: true,
        },
        onPositiveClick: (e: any) => {
          deltree(option.key), e.stopPropagation(), e.preventDefault()
        }
      },
      {
        trigger: () => {
          return h(
            NButton,
            {
              text: true,
              type: 'info',
              color: '#00EAFF',
              size: 'tiny'
            },
            { default: () => '删除' }
          )
        },
        default: () => {
          return '确认删除该节点？'
        }
      }
    )