v-html渲染组件问题
程序员文章站
2022-06-23 08:58:00
由于前面对html进行过解析,今天想用vue拖拽,实现一手类似快站那种自动生成代码,结果就遇到了拖拽组件过去怎么无法解析的问题,因为vue的v-html为了防止xss攻击只能解析html思路先实现简单...
由于前面对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中输出即可
上一篇: vegas中Protype title怎么设置竖排文字?
下一篇: 详解Redis集群搭建的三种方式