2022-6-13
Version: v 2.x
vud design ant:1.78
When using ant confirm, it is the most commonly used component. My page is as follows. When you click delete, a confirm prompt will pop up, as shown in the figure below.
handleDel (params, index) {
let _this = this
_this.$confirm({
title: `是否要删除该项?`,
okText: '确定',
cancelText: '取消',
onOk () {
},
onCancel () {
return false
},
class: 'test',
})
},For comfirm, it is very simple, just write a title, the configuration is as shown above, but now I want to add some detailed information, such as the content of the item I deleted, to make the operation more intuitive for users. For example, as shown in the figure below:
At this time, you only need to add a configuration item content
content:string|vNode|functioni(h)
string: string, more commonly used without much explanation
function(h): JSX syntax content, here you can write your own HTML content. For example, the following content,
Note: The quotation marks of attributes can be single or double. When adding variables, please note the single-layer curly brackets {}. The variable content can be the data in the vue page, or the value returned in the method, etc. (I rarely use the render function to do content. Use However, it is limited to logic that is not very complex)
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
}
})
This is the result of rendering
So, what if you want to add a piece of html?
In vue, if you write such code in a method, as shown in the figure below, if return is directly a piece of html , then it is in JSX syntax format, because babel in the framework automatically converts it, and then places its method In content, a piece of html content can be output. My logic is as follows:
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>
}
},The modified confirm configuration focuses on 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',
})Rendering result
Finally, modify the content according to your logic to output the content you want. Note that in that method, the return is followed by a piece of HTML code. There is no need to add '', which will become a string.
The above is the configuration of the content of ant confirm. Let me go around it.