vue3 + typescript + antd-design-vue(3.x)Modal.form()

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