解释html的组件,v-html渲染组件问题

由于前面对html进行过解析,今天想用vue拖拽，实现一手类似快站那种自动生成代码，结果就遇到了拖拽组件过去怎么无法解析的问题，因为vue的v-html为了防止xss攻击只能解析html

思路

先实现简单页面 分三块左中右，左边是需要拖动的组件，中间是用于组件排列显示，右边是解析出的代码

左边组件列表代码

备选项

import OneComponent from '../components/oneComponent'

export default {

name: '',

data() {

return {

radio: '2',

title: ['Radio 单选框']

}

},

components:{

OneComponent

},

}

中间组件显示代码

class="box"

:width="ruleForm.inputW"

:height="ruleForm.inputH"

>

import Variablebox from "../components/Variablebox";

export default {

name: "",

data() {

var checkSize = (rule, value, callback) => {

console.log(value);

if (value < 500 || value > 1000) {

callback(new Error("建议500 ~ 1000内的数字"));

} else if (!Number.isInteger(Number(value))) {

callback(new Error("请输入数字值"));

} else {

callback();

}

};

return {

ruleForm: {

inputW: 500,

inputH: 500

},

rules: {

inputW: [{ validator: checkSize, trigger: "blur" }],

inputH: [{ validator: checkSize, trigger: "blur" }]

}

};

},

methods: {

},

components: {

Variablebox

}

};

.all

padding: 0 20px

display: flex

flex-direction: column

接下来实现组件的拖拽使用drag和drop 将组件显示在Variablebox页面上,使用v-html无效后,百度了一下,发现基本上叫使用vue.Vue.compile( template ) 和render但是没给例子

compile是将一个模板字符串编译成 render 函数,就是最后

都是render调用createElement,转化成html,但是我们我们是直接渲染

所以个人

感觉行不通,最后只能尝试新建组件然后挂载上去

new Vue({

// el: ‘#app'

template: this.ele,

data:{

radio: '2'

},

}).$mount("#apps");

这样算是暂时决解掉这个问题吧

vue中运用v-html渲染标签

获取后台数据带 标签 内容，需要渲染到页面展示。最终效果如下：图文排版

1.首先拿到数据，单独处理

2.接着在html中输出即可

您可能感兴趣的文章:vue通过v-html指令渲染的富文本无法修改样式的解决方案

用v-html解决Vue.js渲染中html标签不被解析的问题