Question

nuxt：2.0.0 版本：2.6.10 Mac OS：10.14

我在Nuxt.js上有一个应用程序，在Vue.js上也有App.vue。我将App.vue构建为index.html，js和css，并尝试将构建的index.html嵌入到我在Nuxt.js上的应用程序中，但是它永远无法正常工作。我不知道哪个部分不起作用是App.vue的@click事件。

App.vue具有svg图像，并且该图像分离为可单击的部分。当我单击可点击部分时，被点击部分将被更改为点击的颜色。

我构建了该文件，并放置了Nuxt.js的静态文件夹，并通过指定静态文件夹的index.html src嵌入了iframe。

此iframe仅可用于显示svg图像，但单击事件和更改颜色均无效。

我搜索了很多参考文献和网站来寻找解决方案，并且经常看到.postMessage在iframe和父级之间进行交互，但是它从未向控制台发送消息。

我再次确认，iframe的svg图片已正确显示，但只有click event部分无法正常工作。

下面的代码是内嵌App.vue的代码，即iframe的父代

<template lang='pug'>
v-card(flat, color='transparent')
  v-layout(row, wrap, align-center, justify-center)
    v-flex(xs12, sm8, md4)
      div.headline.font-weight-black.accent--text {{ getDoubleDigestNumber(questionNumber) }}
      p.font-weight-bold.py-0(v-if='question.attributes.body') {{ question.attributes.body }}
      p.grey--text.py-0(v-if='question.attributes.note') {{ question.attributes.note }}
  v-layout(row, wrap, align-center, justify-center)
    v-flex.text-xs-center(xs12, sm8, md4)
      div#dermatome-map-container
        iframe#dermatome-map(ref='dermatome', v-bind:src='dermatomeMapUrl', frameborder="0")
      v-btn(
        block,
        color='primary',
        v-on:click='onClickNext') {{ $t('word.next') }}
</template>

<script>
export default {
  name: 'QuestionnairePageQuestionDecimal',
  props: [
    'question',
    'questionNumber'
  ],
  data() {
    return {
      form: { isLoading: false }
    }
  },
  computed: {
    dermatomeMapUrl() {
      return '/dermatome/index.html'
    }
  },
  mouted() {
    window.addEventListener('message', (msg) => {
      console.log(msg.data)
    })
  },
  methods: {
    onClickNext() {
      this.$EventBus.$emit('onClickNext', { question_id: this.question, form: this.form })
    }
  }
}
</script>

App.vue太长，无法在此处编写，因此仅在内部

<script>

export default {
  name: 'App',
  props: [
    'clickable',
    'selectedCategories'
  ],
  data () {
    return {
      COLOR_STROKE: '#353535',
      COLOR_C: '#ED6C63',
      COLOR_L: '#97CD76',
      COLOR_S: '#42AFE3',
      COLOR_T: '#FCE473',
      COLOR_C_SELECTED: 'url(#selectedC)',
      COLOR_L_SELECTED: 'url(#selectedL)',
      COLOR_S_SELECTED: 'url(#selectedS)',
      COLOR_T_SELECTED: 'url(#selectedT)',
      categoriesSelection: {
        c1: false,
        c2: false,
        c3: false,
        c4: false,
        c5: false,
        c6: false,
        c7: false,
        c8: false,
        l1: false,
        l2: false,
        l3: false,
        l4: false,
        l5: false,
        s1: false,
        s2: false,
        s3: false,
        s4: false,
        s5: false,
        t1: false,
        t2: false,
        t3: false,
        t4: false,
        t5: false,
        t6: false,
        t7: false,
        t8: false,
        t9: false,
        t10: false,
        t11: false,
        t12: false
      }
    }
  },
  mounted () {
    this.makeContainerSquare()
    if (this.selectedCategories) {
      this.selectedCategories.forEach((selectedCategory) => {
        this.categoriesSelection[selectedCategory] = true
      })
    }
  },
  methods: {
    makeContainerSquare () {
      if (window.innerWidth < window.innerHeight) {
        let style = ''
        style += `width:${window.innerWidth}px;`
        style += `height:${window.innerWidth}px;`
        style += `margin-top:${(window.innerHeight - window.innerWidth) / 2}px;`
        this.$refs.container.setAttribute('style', style)
      } else {
        let style = ''
        style += `width:${window.innerHeight}px;`
        style += `height:${window.innerHeight}px;`
        style += `margin-left:${(window.innerHeight - window.innerHeight) / 2}px;`
        this.$refs.container.setAttribute('style', style)
      }
    },
    onClickCategory (categories) {
      if (!this.clickable) {
        return
      }
      categories.forEach((category) => {
        this.categoriesSelection[category] = !this.categoriesSelection[category]
      })
      categories.forEach((category) => {
        window.parent.postMessage({
          'name': category,
          'applicable': this.categoriesSelection[category]
        }, '/')
      })
    }
  }
}
</script>

<style lang='stylus'>
svg.dermatome {
  height: 100%;
  float: left;
  width: 100%;
}
</style>

我希望您教我iframe中的点击事件如何工作。

在Nuxt.js上与iframe进行交互

0 个答案: