vue中怎么把ui组件转成dom对象 codemirror

Question

有个需求, 需要从codemirror绑定的value中 , 匹配正则 :{{}}, 把里面的内容换成dom, 比如tag标签,问题,类似于: https://stackoverflow.com/que...
比如value为:

data:()=({value:'sasas{{标签}}{{sada}}' })

最终效果图为:

codemirror提供的相关api为:

此问题有两个难点:
一是replacedWith需要dom对象, 而vue并没有提供把ui组件转dom对象的api, react就有这种api : this.$createElement, vue的render函数中,也有提供createElement参数, 后来了解到vue也有同名api且挂载在原型上,以便在render函数外使用, 但vue的, return的结果里找不到dom对象, 徒有虚名的api
二是: 正则匹配到的{{}},是一个数组,意味着每次循环数组,需要传入新的dom.
解决思路: 1,只能考虑使用原生的document.createElement(), 把ui组件拆成原生dom结构,但是也会有一个问题,新建的oDiv绑定不了事件

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

      oDiv.addEventListener('click', this.onTagClick) // 这里绑定不上事件,不知道为什么
      return oDiv.childNodes[0]
    },

2, 把dom模板写在template中, 这样可以直接写ui组件,使用refs,
但是循环时,用的是同一个ref, 会有对象的引用问题,
目前解决方法是,找到ref,使用node.cloneNode,再手动绑定上事件
(cloneNode不会克隆事件,所以事件没办法写在template里)

问题已解决,提供给大家一个思路

<template>
    <b-tag ref="tag" class="is-primary" style="display:none" />
</template>
methods:{
    tagCodeMirror(cursorPosition) {
      const positions = this.getTagPositions(this.code)
      const baseTagNode = this.$refs.tag.$el

      const tagOps = () => {
        positions.forEach((pos, index) => {
          const dupNode = baseTagNode.cloneNode(true)
          dupNode.style.display = 'inline-flex'
          dupNode.addEventListener('click', this.onTagClick)
          dupNode.childNodes[0].innerText = pos.tag
          this.codeMirror.markText({
            line: pos.line,
            ch: pos.start
          }, {
            line: pos.line,
            ch: pos.stop
          }, {
           replacedWith:dupNode // replacedWith:this.createTagNode(pos.tag),
            handleMouseEvent: true
          })
        })
      }

      this.$nextTick(() => {
        tagOps
        this.codeMirror.operation(tagOps)
        this.codeMirror.setCursor(cursorPosition)
      })
    },
}
  

Answer 1

const app = new Vue({
    data() {
        return {
            num: 0
        }
    },
    template: `
        <div>
            {{num}}
            <button @click="handleAdd">add</button>
        </div>`,
    methods: {
        handleAdd() {
            this.num++
        }
    }
}).$mount()

document.body.appendChild(app.$el);

setTimeout(() => {
  // 调用事件
  app.handleAdd()
  setTimeout(() => {
    // 销毁vue
    app.$destroy()
    // dom移除
    document.body.removeChild(app.$el);
  }, 2000)
}, 2000)

Answer 2

返回的是一个dom对象，可以直接在dom对象绑定事件监听哈。

Answer 3

你要是的$el?

Answer 4

vue有提供this.$createElement方法，但是他return的不是dom对象
失望！

Answer 5

组件挂载一下就能拿到对应的 DOM 了，是这个意思？

const MyComponent = Vue.extend({ template: '<div>Hello!</div>' });
const component = new MyComponent().$mount();
console.log(component.$el);