v-html渲染组件问题
时间：2021-09-01 09:00:58 | 栏目：vue | 点击：次
由于前面对html进行过解析,今天想用vue拖拽，实现一手类似快站那种自动生成代码，结果就遇到了拖拽组件过去怎么无法解析的问题，因为vue的v-html为了防止xss攻击只能解析html
思路
先实现简单页面 分三块左中右，左边是需要拖动的组件，中间是用于组件排列显示，右边是解析出的代码
左边组件列表代码
<div ref="test" >
<one-component :title="title[0]" element="<el-radio v-model='radio' label='1'>备选项</el-radio>">
<el-radio slot="component" v-model="radio" label="1">备选项</el-radio>
</one-component>
</div>
</template>
<script>
import OneComponent from '../components/oneComponent'
export default {
name: '',
data() {
return {
radio: '2',
title: ['Radio 单选框']
}
},
components:{
OneComponent
},
}
</script>
<style lang="stylus" scoped>
</style>
中间组件显示代码
<div class="all">
<el-form label-width="80px" label-position="left" :model="ruleForm" :rules="rules">
<el-form-item label="模拟宽" prop="inputW">
<el-input v-model="ruleForm.inputW" placeholder="请输入宽"></el-input>
</el-form-item>
<el-form-item label="模拟高" prop="inputH">
<el-input v-model="ruleForm.inputH" placeholder="请输入高"></el-input>
</el-form-item>
</el-form>
<Variablebox
class="box"
:width="ruleForm.inputW"
:height="ruleForm.inputH"
></Variablebox>
</div>
</template>
<script>
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
}
};
</script>
<style lang="stylus" scoped>
.all
padding: 0 20px
display: flex
flex-direction: column
</style>
接下来实现组件的拖拽使用drag和drop 将组件显示在Variablebox页面上,使用v-html无效后,百度了一下,发现基本上叫使用vue.Vue.compile( template ) 和render但是没给例子
compile是将一个模板字符串编译成 render 函数,就是最后
都是render调用createElement,转化成html,但是我们我们是直接渲染
</el-radio slot="component" v-model="radio" label="1"/>
所以个人
感觉行不通,最后只能尝试新建组件然后挂载上去
new Vue({
// el: ‘#app'
template: this.ele,
data:{
radio: '2'
},
}).$mount("#apps");
这样算是暂时决解掉这个问题吧
vue中运用v-html渲染标签
获取后台数据带 标签 内容，需要渲染到页面展示。最终效果如下：图文排版
1.首先拿到数据，单独处理
2.接着在html中输出即可
