Добавлять стили к элементам внутри iframe, используя VueJS

Question

У меня есть модальный экран, который включает в себя фрейм для отправки пунктов повестки дня.Теперь я не могу стилизовать сам iframe, поскольку он также используется где-то еще в этом приложении.Мне нужно сделать несколько пользовательских стилей для этого конкретного режима, потому что я должен выровнять некоторые кнопки в разных местах и ​​т. Д.

Я нашел фрагмент кода, чтобы применить стили к внутренним частям 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 и передавать класс и стиль.