vue中使用iframe弹窗

在很多系统中都想用一个登录功能，而且是弹窗的形式，本想着cv大法，但是一旦项目多了就难受了，后期维护。。。

<el-dialog
  ref="loginDialog"
  custom-class="login-dialog"
  :visible="$showLogin"
  width="798px"
  :show-close="false"
>
  <iframe
    referrerpolicy="unsafe-url"
    width="100%"
    ref="iframe"
    :src="iframeSrc"
    frameborder="0"
    scrolling="no"
    v-resize="{
      onMessage: onMessage,
      minHeight: 496
    }"
  ></iframe>
</el-dialog>

// computed
iframeSrc () {
  if (JSON.stringify(this.$userInfo) === '{}') {
    return ''
  } else {
    return '/workbench/login?linkType=self'
  }
}

mounted () {
  this.$refs.loginDialog.rendered = true
},

// methods
onMessage (event) {
  console.log(event)
  const { type } = event.message
  if (type === 'close') {
    this.$setShowLogin(false)
  }
  if (type === 'success') {
    this.$setShowLogin(false)
    window.location.reload()
  }
}
```js
//首先要安装 iframe-resizer
//指令  如果你用的 vuetify这个组件库 指令名不要使用resize会有冲突
import Vue from 'vue'
import iframeResize from 'iframe-resizer/js/iframeResizer'

Vue.directive('resize', {
  bind: function (el, { value = {} }) {
    el.addEventListener('load', () => iframeResize(value, el))
  },
  unbind: function (el) {
    el.iFrameResizer.removeListeners()
  }
})

以下是在作为iframe的页面中使用

mounted () {
  // 内嵌iframe时
  if (this.linkType === 'external' || this.linkType === 'self') {
    this.loadiframeResizer()
  }
},
loadiframeResizer () {
  if (typeof window === 'undefined' || window.iFrameResizer) {
    return
  }

  window.iFrameResizer = {
    onMessage: message => {
      console.log(message)
    },
    onReady: () => {
      window.iFrameResizerReady = true
    }
  }
  const src = '/iframeResizer.contentWindow.min.js'
  const script = document.createElement('script')
  script.src = src
  document.body.appendChild(script)
}