VUE-动态设置组件的宽度 [英] Vue - Setting the width of a component dynamically

问题描述

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

我正在使用组件‘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。我花了相当长的时间试图弄清楚如何动态设置道具的属性或动态更新样式。

例如，我尝试设置：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'  }),
}

现在您只需更改width变量。例如：

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

您可以从文档Vue Props

阅读有关绑定变量的更多信息

这篇关于VUE-动态设置组件的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！