VUE-动态设置组件的宽度

问题描述

我想不出如何动态设置组件的宽度。

我正在使用组件‘vue-burger-Menu’->https://github.com/mbj36/vue-burger-menu。

<Slide
      ref="slideToggle"
      disable-esc
      class="slideToggle"
      width="470"
      right
      :burger-icon="false"
      :cross-icon="false"
      disable-outside-click
    >

例如，我尝试设置：this.$refs.slideToggle.$attrs.width = 1000但无济于事。

我无法将样式绑定到bm-menu类，因为它不可见。

如何设置宽度以便在单击按钮时更改(根据下面的按钮示例)？

谢谢您的帮助！

setDrawWidth() {
        this.lineDrawWidth = "200px";
    }

推荐答案

只需绑定道具前使用:：

<Slide
      ref="slideToggle"
      disable-esc
      class="slideToggle"
      :width="width"
      right
      :burger-icon="false"
      :cross-icon="false"
      disable-outside-click
>

，然后在js部分的data中：

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

export default {
     data:() => ({   width: '470'  }),
     methods:{
          changeWidth(){
               this.width = '1000';
          }
     }
}

您可以从文档Vue Props