亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

v-html渲染組件問(wèn)題

 更新時(shí)間：2021年05月30日 14:47:03   作者：huliten  
最近在學(xué)習(xí)vue，今天正好發(fā)現(xiàn)個(gè)問(wèn)題，本文介紹了v-html渲染組件問(wèn)題，整理了問(wèn)題的解決方法，有需要的小伙伴可以參考下

由于前面對(duì)html進(jìn)行過(guò)解析,今天想用vue拖拽，實(shí)現(xiàn)一手類(lèi)似快站那種自動(dòng)生成代碼，結(jié)果就遇到了拖拽組件過(guò)去怎么無(wú)法解析的問(wèn)題，因?yàn)関ue的v-html為了防止xss攻擊只能解析html

思路

 先實(shí)現(xiàn)簡(jiǎn)單頁(yè)面 分三塊左中右，左邊是需要拖動(dòng)的組件，中間是用于組件排列顯示，右邊是解析出的代碼

左邊組件列表代碼

  <div ref="test" >
    <one-component :title="title[0]" element="<el-radio v-model='radio' label='1'>備選項(xiàng)</el-radio>"> 
      <el-radio slot="component" v-model="radio" label="1">備選項(xiàng)</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="請(qǐng)輸入寬"></el-input>
      </el-form-item>
      <el-form-item label="模擬高" prop="inputH">
        <el-input v-model="ruleForm.inputH" placeholder="請(qǐng)輸入高"></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內(nèi)的數(shù)字"));
      } else if (!Number.isInteger(Number(value))) {
        callback(new Error("請(qǐng)輸入數(shù)字值"));
      } 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>

接下來(lái)實(shí)現(xiàn)組件的拖拽使用drag和drop 將組件顯示在Variablebox頁(yè)面上,使用v-html無(wú)效后,百度了一下,發(fā)現(xiàn)基本上叫使用vue.Vue.compile( template ) 和render但是沒(méi)給例子

compile是將一個(gè)模板字符串編譯成 render 函數(shù),就是最后
都是render調(diào)用createElement,轉(zhuǎn)化成html,但是我們我們是直接渲染
</el-radio slot="component" v-model="radio" label="1"/>
所以個(gè)人
感覺(jué)行不通,最后只能?chē)L試新建組件然后掛載上去

   new Vue({
        // el: ‘#app'
        template: this.ele,
         data:{
           radio: '2'
        },
      }).$mount("#apps");

這樣算是暫時(shí)決解掉這個(gè)問(wèn)題吧

vue中運(yùn)用v-html渲染標(biāo)簽

獲取后臺(tái)數(shù)據(jù)帶 標(biāo)簽 內(nèi)容，需要渲染到頁(yè)面展示。最終效果如下：圖文排版

1.首先拿到數(shù)據(jù)，單獨(dú)處理

2.接著在html中輸出即可

相關(guān)文章

最新評(píng)論