欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

v-html渲染组件问题

程序员文章站 2022-06-23 08:58:00
由于前面对html进行过解析,今天想用vue拖拽,实现一手类似快站那种自动生成代码,结果就遇到了拖拽组件过去怎么无法解析的问题,因为vue的v-html为了防止xss攻击只能解析html思路先实现简单...

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

v-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渲染标签

v-html渲染组件问题

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

v-html渲染组件问题

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

v-html渲染组件问题

2.接着在html中输出即可

v-html渲染组件问题