vue Render函数的使用

今儿用了Render函数这个东西渲染页面，特此记录一下用法。

  const h = that.$createElement;
            that.$info({
                title: '导出数据',
                content: h('div', {class: 'dialogDiv'},[
                   h('div', {
                   	style: {
                      display: 'flex',
                      'align-items': 'center',
                     margin: '30px 0 20px 0 '
                    },
                   }, [
                   	 h('span', '页码'),
                      h('a-input', {
                      		style: {
                            flex: '1',
                           margin: '0 0 0 10px'
                          },
                      }),
                   ]),
                   h('div', {
                   	style: {
                      display: 'flex',
                      'align-items': 'center'
                    },
                   }, [
                   	 h('span', '条数'),
                      h('a-input', {
                      	style: {
                          flex: '1',
                          margin: '0 0 0 10px'
                        },
                      }),
                   ]),
                ]),
                onOk() {
                },
              });

大概如上这样，h中第一个参数是标签，第二个参数定义各种标签上面的属性，第三个数组形式的是子标签存放的地方。

 h('div', {class: 'dialogDiv'},[])

从别的地方复制过来的第二个参数的列举
eg:

{
  // 和`v-bind:class`一样的 API
  'class': {
    foo: true,
    bar: false
  },
  // 和`v-bind:style`一样的 API
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 正常的 HTML 特性
  attrs: {
    id: 'foo'
  },
  // 组件 props
  props: {
    myProp: 'bar'
  },
  // DOM 属性
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器基于 "on"
  // 所以不再支持如 v-on:keyup.enter 修饰器
  // 需要手动匹配 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅对于组件，用于监听原生事件，而不是组件使用 vm.$emit 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令. 注意事项：不能对绑定的旧值设值
  // Vue 会为您持续追踨
  directives: [
    {
      name: 'my-custom-directive',
      value: '2'
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 如果子组件有定义 slot 的名称
  slot: 'name-of-slot'
  // 其他特殊顶层属性
  key: 'myKey',
  ref: 'myRef'
}

over