vue中iframe高度自适应-指令

最新推荐文章于 2024-10-09 19:23:14 发布

weixin_43859458

最新推荐文章于 2024-10-09 19:23:14 发布

阅读量2k

点赞数

分类专栏： vue 文章标签： vue js

本文链接：https://blog.csdn.net/weixin_43859458/article/details/105087796

版权

vue 专栏收录该内容

14 篇文章

订阅专栏

vue中iframe高度自适应


```javascript
<template>
  <div class="home">
    <iframe src="" :height="iframeH" width="100%" frameborder="0" v-resize="res"></iframe>
  </div>
</template>

<script>
  export default {
    name: "Home",
    components: {

    },
    data() {
      return {
        iframeH: 150,
      }
    },
    directives: {
      resize: {
        bind(el, binding) {
          let height = ''
          let flag = true;

          function get() {
            let ch = el.contentWindow.document.getElementById('app').scrollHeight;
            if (height != ch) {
              if (height != '') {
                if (flag) {
                  flag = false;
                  binding.value({
                    ch
                  })
                  flag = true
                }
              }
              height = ch;
            }
          }
          el._vueReize_ = setInterval(get, 500)
        },
        unbind(el) {
          clearInterval(el._vueReize_)
        }
      }
    },
    methods: {
      res(val) {
        this.iframeH = val.ch
      }
    }
  };

</script>