Vue - динамическая установка ширины компонента - PullRequest
Новая
       26

Vue - динамическая установка ширины компонента

0 голосов
/ 29 апреля 2020

Я не могу понять, как динамически установить ширину компонента.

Я использую компонент 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. Я потратил довольно много времени, пытаясь выяснить, как установить атрибут prop динамически или динамически обновить стиль.

Например, я попытался установить: this.$refs.slideToggle.$attrs.width = 1000 безрезультатно.

I невозможно привязать стиль к классу bm-menu, так как он не виден.

Как настроить ширину, чтобы при нажатии кнопки она изменялась (в соответствии с примером кнопки ниже)?

Спасибо за вашу помощь! 

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

Ответы [ 2 ]

3 голосов
/ 29 апреля 2020

Вам просто нужно связывание, которое использует : перед реквизитом: 

<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';
          }
     }
}

Подробнее о связывании переменных можно узнать из do c: Vue Props

0 голосов
/ 29 апреля 2020

Прослушивание события ширины окна: 

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
    >
...