首先介绍一下ant-design-vue Modal
这里是官网 ant-design-vue
Moadl支持Modal.confirm
Modal.confirm({
title: 'Do you Want to delete these items?',
icon: createVNode(ExclamationCircleOutlined),
content: createVNode('div', { style: 'color:red;' }, 'Some descriptions'),
onOk() {
console.log('OK');
},
onCancel() {
console.log('Cancel');
},
class: 'test',
});
这里可以看到content使用了createVNode函数,这里我们可以引入一个tsx组件作为node接入进来
注意:vue3中的tsx写法这里只介绍两种
一种是render函数形式,一种是setup
export default defineComponent({
props: {
msg: {
type: String,
default: ''
}
},
render () {
const testClick = () => {
this.$emit('submit')
}
const confirm = () => {
return (
<button onClick={testClick}>hello</button>
)
}
return confirm()
}
render函数形式的组件可以通过this获取vue实例,进而进行操作(这里用到父子组件传值)
export default defineComponent({
props: {
msg: {
type: String,
default: ''
}
},
setup(props, { emit }) {
const testClick = () => {
emit('test')
}
const comfirm = {
render() {
<button onClick={testClick}>hello</button>
},
};
return {
comfirm
}
}
})
这里是setup形式的tsx,这里官网也有介绍
vue3 jsx/tsx
接下来是在Modal.confirm()中的content使用该组件
import TestConfirm from './test';
const confirm = () => {
Modal.confirm({
title: 'Confirm',
icon: createVNode(ExclamationCircleOutlined),
content: createVNode(TestConfirm, {
onSubmit() {
}
}),
// content: () => h(TestConfirm, { msg: 'hello word' }),
okText: '确认',
cancelText: '取消',
});
};
’TestConfirm‘是tsx子组件,子组件的emit出来的方法在content中要以on开头写成驼峰。
以上就是vue3使用tsx在Modal.form({content})中结合的使用