×

VUE开发:v-html渲染组件问题

作者:Web前端之家2021.05.31来源:Web前端之家浏览:397评论:0
关键词:vue

VUE开发:v-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 scoped>
</style>

中间组件显示代码:

  <div>
    <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
     
      :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 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");

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/vuejs20210531a.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • qianduan

    这个跟H5做的很像,看上去用react实现起来要简单些。...

  • qianduan

    YYDS的文章,收藏了。...

  • 访客

    红红火火恍恍惚惚...

  • 跨境电商运营

    谢谢站长的文章已经解决问题了...

  • 跨境电商运营

    非常不错的文章下次还会再来!...

  • Web前端之家

    可以的,有时间会发些关于SEO相关的文章~...

  • s4f

    SEO很难啊,小编多发点类似文章吧!...

  • Web前端之家

    应该没什么问题吧,等待官宣,毕竟还没正式公开这个版本。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.7 Valyria