首先介紹一下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})中結合的使用

總結

以上是生活随笔為你收集整理的vue3 + typescript + antd-design-vue(3.x)Modal.form()的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。