V-html encountered a component that needed to be rendered

Because the previous face of HTML parsing, today want to use vue drag, a similar quick station that automatically generated code, the result encountered drag components in the past how to parse the problem, because Vue V-HTML in order to prevent XSS attacks can only parse HTML

Train of thought

  • The first implementation of a simple page is divided into three parts left and right, the left side is the need to drag components, the middle is used for the display of components, the right side is the parsing of the code

Left component list code

<div ref="test" > <one-component :title="title[0]" Element ="<el-radio V-model ='radio' label='1'> <el-radio slot=" Component "V-model ="radio" label="1"> Alternative </el-radio> </one-component> </div> </template> <script> import OneComponent from '.. /components/oneComponent' export default { name: '', data() { return { radio: '2', title: ['Radio menu ']}}, components:{OneComponent},} </script> <style lang="stylus" scoped>Copy the code

The intermediate component displays the code

<div class="all"> <el-form label-width="80px" label-position="left" :model="ruleForm" :rules="rules"> <el-form-item InputW "placeholder=" placeholder "></el-input> </el-form-item> <el-form-item label=" prop "="inputH"> < EL-input V-model ="ruleForm.inputH" placeholder=" 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 (" advice within 500 ~ 1000 digital ")); } else if (! Number. IsInteger (Number(value))) {callback(new Error(" Please input Number value ")); } 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>Copy the code
  • Then implement drag and drop of the component to display the component on the Variablebox page using drag and drop. Using V-HTML does not work, baidu found that it is called using vue.vue.compile (template) and render but did not give examples
New Vue ({/ / el: '# app template: this. Ele, data: {radio:' 2 '}.}). $mount (" # apps ");Copy the code

This is a temporary solution to the problem (the boss knows a good way to leave a comment)