vue design ant confirm中的content如何写HTML

2022-6-13

版本：v 2.x

vud design ant:1.78

在使用ant confirm 的时候，它是最常用的一种组件，我的页面如下，当点击删除的时候，会弹出confirm提示，如下图所示

handleDel (params, index) {
            let _this = this
            _this.$confirm({
                title: `是否要删除该项?`,
                okText: '确定',
                cancelText: '取消',
                onOk () {
                   
                },
                onCancel () {
                    return false
                },
                class: 'test',
            })
},

对于，comfirm，很简单，写个标题即可，配置如上图，但是现在我想加入一些详细信息，比如我删除的项内容是什么，让用户操作起来更直观。比如下图所示:

这个时候，只需要加入一个配置项content

content:string|vNode|functioni(h)

string:字符串，具体不多解释比较常用

function(h):JSX语法内容，在这里你就可以写自己的HTML内容了。比如下面内容，

注意：属性的引号可单可双，加变量注意是单层花括号{}，变量内容可以是vue页面中的data，或者方法里面返回的值等（本人很少用render函数去做内容，用过也仅限于不是很复杂的逻辑）

let _this = this
 let a =100
let str="hello "
_this.$confirm({
    title: `是否要删除该项?`,
    okText: '确定',
    cancelText: '取消',
    content: h =>
        <div style='margin-top:20px'>
            我是内容{a},{str}
        </div>
    ,
    onOk () {
                    
    },
    onCancel () {
        return false
    }               
})

这个是渲染的结果

那么，如果你想加一段html怎么办呢？

在vue中，如果你在方法中写这样的代码的话，如下图所示，如果return 直接是一段html的话，那么它就是JSX语法格式，因为框架中的babel自动给转了，再将其方法放置到content中，即能输出一段html内容了，我的逻辑如下，

getDelContentHtml (params, index) {
            // 删除详情信息
            let _this = this
            if (params == 'Orderders') {
                return <div><div style="margin-top:20px">配置项：<span>Orderers</span></div>
                    <div>名称：<span>{_this.form[params][index].name}</span></div>
                    <div>IP：<span>{_this.form[params][index].ip}</span></div>
                </div>
            } else if (params == 'Companys') {
                return <div><div style="margin-top:20px">配置项：<span>记账主体</span></div>
                    <div>主体名称：<span>{_this.form[params][index].CompanyName}</span></div>
                </div>
            }
        },

改造后的confirm的配置，重点是content：h=> .........

_this.$confirm({
                title: `是否要删除该项?`,
                okText: '确定',
                cancelText: '取消',
                content: h =>
                    <div style='margin-top:20px'>
                        {_this.getDelContentHtml(params, index)}  // 获取的Jsx值
                    </div>
                ,
                onOk () {
                    
                },
                onCancel () {
                    return false
                },
                class: 'test',
            })

渲染结果

最后根据你的逻辑把内容改造一下就能输出你想要的内容了，注意那个方法中，return后面就是一段HTML代码即可，不用加''，加了就变成字符串了。

以上就是ant confirm的content的配置了，大佬绕行。

vue design ant confirm中的content如何写HTML

猜你喜欢