Vue - 动态设置组件的宽度

Question

我不知道如何动态设置组件的宽度。我正在使用组件 'vue-burger-menu' -> https://github.com/mbj36/vue-burger-menu。要设置宽度，需要将道具设置width为一个数字。按照下面的例子：<Slide      ref="slideToggle"      disable-esc      class="slideToggle"      width="470"      right      :burger-icon="false"      :cross-icon="false"      disable-outside-click    >然后它设置一个辅助类bm-menu-width 到width. 我花了很长时间试图弄清楚如何动态设置道具的属性或动态更新样式。例如我尝试设置：this.$refs.slideToggle.$attrs.width = 1000无济于事。我无法将样式绑定到bm-menu类，因为它不可见。如何设置宽度，以便单击它更改的按钮（根据下面的按钮示例）？谢谢你的帮助！setDrawWidth() {        this.lineDrawWidth = "200px";    }

Answer 1

您只需要:在道具之前使用的绑定：

<Slide

      ref="slideToggle"

      disable-esc

      class="slideToggle"

      :width="width"

      right

      :burger-icon="false"

      :cross-icon="false"

      disable-outside-click

>

然后在你data的js部分：

export default {

     data:() => ({   width: '470'  }),

}

现在你只需要改变width变量。例如：

export default {

     data:() => ({   width: '470'  }),

     methods:{

          changeWidth(){

               this.width = '1000';

          }

     }

}

您可以从文档中阅读有关绑定变量的更多信息：Vue Props

Answer 2

监听窗口宽度事件：

data: () => ({

  width: 470

})

created() {

  window.addEventListener("resize", this.changeWidth);

},

destroyed() {

  window.removeEventListener("resize", this.changeWidth);

},

methods: {

  changeWidth(e) {

    const screenWidth = window.innerWidth;

    this.width = screenWidth

  }

}

并在组件中设置宽度Slide：

<Slide

      ref="slideToggle"

      disable-esc

      class="slideToggle"

      :width="width"

      right

      :burger-icon="false"

      :cross-icon="false"

      disable-outside-click

    >