In the elementUI MessageBox pop-up box, the problem occurs when the custom message is VNode

href of a tag in VNode does not work

related codes

    const h = this.$createElement;
    this.$msgbox({
      title: "",
      message: h("p", null, [
        h("span", null, ""),
        h("a", { style: "color: teal", href:"https://segmentfault.com"}, "")
      ]),
      showCancelButton: false
    })


to write in attrs

this.$msgbox({
  title: '',
  message: h('p', null, [
    h('span', null, ''),
    h('a', {style: 'color: teal', attrs: {href: 'https://segmentfault.com'}}, ''),
  ]),
  showCancelButton: false,
});

see the object description below, copied from ide/render-function.html-sharp%E6%B7%B1%E5%85%A5-data-%E5%AF%B9%E8%B1%A1" rel=" nofollow noreferrer "> document

{
  // `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
  },
  //  `binding`  `oldValue`
  //  Vue 
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 
  slot: 'name-of-slot',
  // 
  key: 'myKey',
  ref: 'myRef',
  //  ref 
  //  `$refs.myRef` 
  refInFor: true
}

recommended Dialog dialog

Menu