Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

【不能动态设置大小、位置】问题解决 #182

Open
misakichan opened this issue Jun 14, 2023 · 1 comment
Open

【不能动态设置大小、位置】问题解决 #182

misakichan opened this issue Jun 14, 2023 · 1 comment

Comments

@misakichan
Copy link

misakichan commented Jun 14, 2023

首先感谢作者提供了这么好用的组件。
目前组件只支持初始化时加载x、y、w、h,不支持响应式的二次修改。

解决方案一:
给组件添加key,绑定到data,初始值0,在需要修改的时候,修改x、y、w、h之后,给key加一。
原理是key变化时,vue会重新渲染组件,
缺点:组件会重新加载,我这边是拖拽iframe,重新加载会影响业务流程,故采用方案二。

解决方案二:
通过直接修改组件style
以全屏窗口需求为例:
首先给组件设置ref为resize。

screen: _.throttle(function () {
      this.$refs.resize.$el.style.top = "0px"
      this.$refs.resize.$el.style.left = "0px"
      const iframeContainer = this.$refs.resize.$refs.container

      if (iframeContainer){
        iframeContainer.style.width =  window.innerWidth - 18 + 'px'
        iframeContainer.style.height =  window.innerHeight - 20 + 'px'
      }
      this.$nextTick(()=>{
        this.currentHeight = window.innerHeight - 20
        this.currentWidth = window.innerWidth
      })


    }, 800, {trailing: false}),
@zyx20100911
Copy link

感谢~我使用了方案1解决了问题

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants