Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

希望支持methods内,使用createElement 创建ui组件,目前版本 jsx只能用在render函数内 #10978

Closed
Valar103769 opened this issue Jan 3, 2020 · 5 comments

Comments

@Valar103769
Copy link

@Valar103769 Valar103769 commented Jan 3, 2020

What problem does this feature solve?

当一个函数需要接受element类型的参数时, 在vue中, 我想让ui组件生成dom对象,而不仅仅使用原生的createElement方法,

https://codemirror.net/doc/manual.html#markText 如codemirror.markText下的replacedWith方法, 需要element对象
{
 replacedWith: <el-button></el-button>,
}
// 如上写法并不会生效,
// 退而求其次,使用原生的createElement方法创建dom,

//   const oDiv = document.createElement('div')
//   oDiv.innerHTML = `<span class="tag is-primary">
//   <span>${innerText}</span>
//  </span>`

/但是模板字符串的写法, 事件又绑定不上, 太折腾了, 我希望vue能提供类似react的createElement方法, 并且在任何地方都可以使用, 因为目前只能在render函数内,

What does the proposed API look like?

this.$createElement()

@sodatea

This comment has been minimized.

Copy link
Member

@sodatea sodatea commented Jan 3, 2020

这个方法本来就有啊……

@Valar103769

This comment has been minimized.

Copy link
Author

@Valar103769 Valar103769 commented Jan 3, 2020

有的话,在哪里?

@sodatea

This comment has been minimized.

Copy link
Member

@sodatea sodatea commented Jan 3, 2020

你在方法里试着打印一下 this.$createElement

@sodatea sodatea closed this Jan 3, 2020
@Valar103769

This comment has been minimized.

Copy link
Author

@Valar103769 Valar103769 commented Jan 6, 2020

你在方法里试着打印一下 this.$createElement

确实有这个方法, 但是它return的并不是dom对象, 我需要的是跟原生的createElement一样, 创建dom对象,
这个应该是这样:

const node = this.$createElement(<el-button >这是组件ui</el-button>)
@Valar103769

This comment has been minimized.

Copy link
Author

@Valar103769 Valar103769 commented Jan 6, 2020

// 源码是这样的. 如果可以的话, 请教我怎么改写代码
  tagCodeMirror(cursorPosition) {
      const h = this.$createElement
      const positions = []

      const tagOps = () => {
        positions.forEach((pos) => {
          this.tagValue = pos.tag
          this.codeMirror.markText({
            line: pos.line,
            ch: pos.start
          }, {
            line: pos.line,
            ch: pos.stop
          }, {
            replacedWith: h('b-tag', {
              attrs: {
                type: 'is-primary'
              },
              on: {
                click: this.onTagClick
              }
            }, pos.tag),
            handleMouseEvent: true
          })
        })
      }
    }

// 程序报错: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.