vue在线预览html,如何在vue里生成这样的html

其实只要理解了组件挂载原理，也不难处理。

有个东西叫手动挂载可以了解一下，空格的地方需要处理成一个元素，把el-input挂载到该元素上。

首先如果获取的数据直接返回这个格式的话，你要先处理一下(最好是获取到的数据就处理好了),横线可以用一个特殊元素代替：

html: '申请人签名：

日期：

年

月

日'

需要注意的是这里的a_special_class最好是特殊的，不会与其它元素重复的，并且这里设置一下display为inline或者用span。

代码大概如下(手写的，未进行测试)：

template部分

js部分

import { ElInput } from xxx

export default {

data () {

return {

html: '申请人签名：

日期：

年

月

日'

}

},

mounted () {

this.mountElInput()

},

methods: {

mountElInput () {

let ElInputConstructor = Vue.extend(ElInput)

this.$nextTick(() => {

let inputList = this.$el.querySelectorAll('.a_special_class')

for (let element of inputList) {

let vm = new ElInputConstructor()

vm.$mount(element)

}

})

}

}

}