Question

我想在<v-img>内部使用v-html的vuetify来代替标准<img>，即

<div v-html="'<v-img src="some_image_url" />'">

我了解到v-html仅适用于标准HTML组件，并且我想知道在<v-img>内是否仍然可以使用自定义组件（例如v-html）。

Answer 1

下面的示例使用一些便宜而愉快的RegExps进行解析，而我在生产代码中不会使用任何东西。我的重点是如何避免使用v-html，而不是找到一种可靠的方法来解析<img>标签。

我要演示的关键是如何将文本解析成块，然后遍历模板中的块以创建v-img组件。我为v-img使用了一个虚拟组件，但原理与真实事物完全相同。

new Vue({
  el: '#app',
  
  components: {
    vImg: {
      template: '<strong>[<slot/>]</strong>'
    }
  },
  
  data () {
    return {
      text: 'Something something <img src="somepath"> and <img src="otherpath">'
    }
  },
  
  computed: {
    chunks () {
      const re = /(<img\s[^>]*>)/g
      const text = this.text
      const parts = text.split(re).filter(part => part)

      return parts.map(part => {
        if (part.match(re)) {
          const matchSrc = part.match(/\ssrc="([^"]*)"/)
          
          return {
            src: matchSrc && matchSrc[1]
          }
        }
        
        return part
      })
    }
  }
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <template v-for="chunk in chunks">
    <template v-if="typeof chunk === 'string'">{{ chunk }}</template>
    <v-img v-else>{{ chunk.src }}</v-img>
  </template>
</div>

Answer 2

我设法用v-runtime-template来解决它，可以在这里找到：

https://github.com/alexjoverm/v-runtime-template

干杯！

如何在v-html中使用vuetify的v-img

2 个答案: