2022-6-13
Versión: v 2.x
hormiga de diseño vud: 1,78
Cuando se utiliza Ant Confirm, es el componente más utilizado. Mi página es la siguiente: cuando hace clic en Eliminar, aparecerá un mensaje de confirmación, como se muestra en la siguiente figura.
handleDel (params, index) {
let _this = this
_this.$confirm({
title: `是否要删除该项?`,
okText: '确定',
cancelText: '取消',
onOk () {
},
onCancel () {
return false
},
class: 'test',
})
},Para confirmar, es muy simple, solo escriba un título, la configuración es como se muestra arriba, pero ahora quiero agregar información detallada, como el contenido del elemento que eliminé, para que la operación sea más intuitiva para los usuarios. Por ejemplo, como se muestra en la siguiente figura:
En este momento, solo necesita agregar el contenido del elemento de configuración
contenido:cadena|vNodo|funcióni(h)
cadena: cadena, más comúnmente utilizada sin mucha explicación
función (h): contenido de sintaxis JSX, aquí puede escribir su propio contenido HTML. Por ejemplo, el siguiente contenido,
Nota: Las comillas de los atributos pueden ser simples o dobles. Al agregar variables, tenga en cuenta las llaves de una sola capa {}. El contenido de la variable puede ser los datos en la página vue o el valor devuelto en el método, etc. (Rara vez uso la función de renderizado para crear contenido. Sin embargo, se limita a una lógica que no es muy compleja)
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
}
})
Este es el resultado de renderizar.
Entonces, ¿qué pasa si quieres agregar un fragmento de html?
En vue, si escribe dicho código en un método, como se muestra en la figura siguiente, si return es directamente un fragmento de html , entonces está en formato de sintaxis JSX, porque babel en el marco lo convierte automáticamente y luego coloca su método. En contenido, se puede generar una parte del contenido html. Mi lógica es la siguiente:
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>
}
},La configuración de confirmación modificada se centra en el contenido: 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',
})Resultados de renderizado
Finalmente, modifique el contenido de acuerdo con su lógica para generar el contenido que desea. Tenga en cuenta que en ese método, el retorno va seguido de un fragmento de código HTML. No es necesario agregar '', que se convertirá en una cadena.
Lo anterior es la configuración del contenido de ant confirm, déjame repasarlo.