Question

我有一个模态屏幕，其中包括一个iframe以发送议程项目。现在，我无法设置iframe本身的样式，因为它也已在此应用程序的其他地方使用。我需要为此特定的模态tho做一些自定义样式，因为我必须将一些按钮对准不同的位置，等等。

我找到了一段代码，将样式应用于iframe的内部，但无法正常工作。请注意，我在VueJS中工作，将常规JS转换为VueJS不是我的专长。我真的很想为某些商品设计样式……

  <div class="base-modal" style="min-width:1100px;">
    <div id="modal-tools">
      <button id="close-modal" type="button" class="mdi mdi-18px mdi-close" @click="$parent.close"></button>
    </div>
    <div class="box-column">
      <iframe class="is-full-width" style="min-height:650px" id="the-iframe" :src="`crmtask/ical?crmtaskid=${crmtaskid}`" ref="iframe"></iframe>
    </div>
  </div>
</template>

<script>

export default {
  mounted () {
    var iframe = document.getElementById('the-iframe')
    var css = document.createElement('style')
    css.type = 'text/css'
    var styles = 'body {' +
        '  background-color: lime;' +
        '  color: pink;' +
    '}'
    css.appendChild(document.createTextNode(styles))
    iframe.contentDocument.head.appendChild(css)
  },
  props: {
    crmtaskid: {
      type: String,
      default: ''
    }
  }
}
</script>

我真的很希望能够为某些按钮设置样式，例如在此iframe内

Answer 1

如果您愿意使用第三方插件，则可以使用vue-friendly-iframe或vue-frame。

Vue-frame允许您以div渲染框架，并传递类和样式。

使用VueJS将样式附加到iframe内的元素

1 个答案: