vue render()函数使用

ant-design-vue框架的Modal. confirm对话框，content参数只能是string/vNode/jsx。如果要想自定义样式，只能render函数处理了。

https://www.antdv.com/components/modal-cn/

h()函数接收3个参数分别是：

1.String(必填)：标签p，span，div等

2.Object(可选)：对象属性，详情参考Vue官网【深入数据对象】

3.String或Array(可选)：嵌套文本内容或h()函数

使用方法一：（虚拟dom）

<template>
  <div>Vue render函数</div>
</template>

<script>
export default {
  name: 'vue',
  data() {
    return {}
  },
  mounted() {
    this.confirm()
  },
  methods: {
    //弹窗
    confirm() {
      this.$confirm({
        title: '以下的日期无值班人员，请确认是否执行？',
        content: (h) => this.getVNode(h),//
        okText: '提交',
        cancelText: '关闭',
        onOk: () => {
            //do something
        },
        onCancel: () => {
          return Promise.resolve() //关闭
        },
      })
    },
    //vNode
    getVNode(h) {
      return h(
        // 第一个参数是一个简单的HTML标签字符"必选"
        'div',
        // 第二个参数是一个包含模板相关属性的数据对象"可选"
        {
          style: {
            maxHeight: '600px',
            overflow: 'auto',
          },
        },
        // 第三个参数是String或Array"可选"
        [
          '无值班人员时该工单将无人匹配，需手动指派！',
          h('p', {
            style: {
              color: '#666',
              fontSize: '14px',
              marginTop:'15px',
            },
            domProps: {
              innerHTML: '2022-01-23的工单没人指派！',
            },
            on: {
              click: ()=>{ console.log("点击事件！") }
            },
          }),
          h('p', {
            style: {
              color: '#666',
              fontSize: '14px',
            },
            domProps: {
              innerHTML: '2022-02-01的工单没人指派！',
            },
          }),
          h('p', {
            style: {
              color: '#666',
              fontSize: '14px',
            },
            domProps: {
              innerHTML: '2022-02-11的工单没人指派！',
            },
          }),
        ]
      )
    },
  },
}
</script>

效果图：

image.png

使用方法二：（标签、UI组件与jsx语法）。注意：vue-reder 和 react-render 原理相通。jsx的map函数单个UI组件用括号()，返回多个UI组件用数组[]。

this.$confirm({
  title: '提示',
  okText: '确认',
  cancelText: '取消',
  width: 1000,
  content: (h) => {
    let contentStr = '该建筑节点已关联A生产线的A1工序，有变更请修改生产线配置'
    let listArr = [
      {
        productionLineName: '钢铁生产',
        productionProcessName: '锻火',
      },
      {
        productionLineName: '钢铁生产',
        productionProcessName: '淬火',
      },
      {
        productionLineName: '钢铁生产',
        productionProcessName: '成型',
      },
    ]
    return (
      <div>
        <style type="text/css">{`.ConfirmDescriptions th.ant-descriptions-item-label{width: 110px;}`}</style>
        <div style="margin-bottom:15px;">{contentStr}</div>
        <a-descriptions class="ConfirmDescriptions" bordered title="" size="small">
          {listArr.map((item, index) => {
            return [
              <a-descriptions-item label="生产线名称" span={2}>
                {item.productionLineName}
              </a-descriptions-item>,
              <a-descriptions-item label="生产工艺" span={2}>
                {item.productionProcessName}
              </a-descriptions-item>,
            ]
          })}
        </a-descriptions>
      </div>
    )
  },
  onOk: async () => {},
  onCancel: () => {
    //取消
  },
})

image.png

参考的文章：

https://www.jianshu.com/p/7508d2a114d3

https://blog.csdn.net/sansan_7957/article/details/83014838