В VueJS как определить ширину элемента элемента в шаблоне


В VueJS как определить ширину элемента элемента в шаблоне

17.09.2019 11:42:42 Просмотров 624 Источник

У меня есть приложение VueJS, которое создает два divs в контейнере div, которые выложены с display:flexтак:

 +-------------------------------------------+
 | div#app                                   |
 | +---------------------+ +---------------+ |
 | |                     | |               | |
 | |       div.a         | |     div.b     | |
 | |                     | |               | |
 | +---------------------+ +---------------+ |
 |                                           |
 +-------------------------------------------+

Внутри div.a- это элемент svg, который также генерируется Vue.

Мне нужно знать размер ширины div.a для того, чтобы создать подходящий СВГ. Есть идеи, как это выяснить?

vue.js vuejs2
У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/57970492/in-vuejs-how-to-determine-the-element-width-of-an-element-within-the-template#comment102351201_57970492
https://stackoverflow.com/questions/57970492/in-vuejs-how-to-determine-the-element-width-of-an-element-within-the-template#comment102351237_57970492
https://stackoverflow.com/questions/57970492/in-vuejs-how-to-determine-the-element-width-of-an-element-within-the-template#comment102351297_57970492
https://stackoverflow.com/questions/57970492/in-vuejs-how-to-determine-the-element-width-of-an-element-within-the-template#comment102351378_57970492
@Seblor это сработало! спасибо - вы хотите поставить это в качестве ответа,и я приму?
https://stackoverflow.com/questions/57970492/in-vuejs-how-to-determine-the-element-width-of-an-element-within-the-template#comment102351425_57970492
Там уже есть правильный ответ, вы можете принять его, я не возражаю :)

Ответы - В VueJS как определить ширину элемента элемента в шаблоне / In VueJS how to determine the element width of an element within the template

Является ответом!
skirtle

17.09.2019 11:50:08

Вам придется подождать, пока компонент не будет отображен, а затем захватить ссылку на элементы с помощью $refs. Вот вам пример:

new Vue({
  el: '#app',
  
  mounted () {
    const divA = this.$refs.divA
    
    console.log('inner width is: ' + divA.clientWidth)
  }
})
.ct {
  border: 1px solid red;
  display: flex;
  height: 40px;
  padding: 10px;
}

.a {
  border: 1px solid green;
  flex: 1;
}

.b {
  border: 1px solid blue;
  flex: 2;
}
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>

<div id="app">
  <div class="ct">
    <div class="a" ref="divA"></div>
    <div class="b"></div>
  </div>
</div>

Обратите внимание, что это не будет отслеживать изменение размера, вам нужно будет измерить его снова, когда происходят изменения размера.

Источник
https://stackoverflow.com/questions/57970492/in-vuejs-how-to-determine-the-element-width-of-an-element-within-the-template/57970628#comment102351450_57970628
Блестяще, спасибо. Я добавил прослушиватель событий в окне.измените размер, чтобы вызвать пересчет размеров. Обратите внимание также, что нам нужно установить "overflow: hidden" на divs, потому что в противном случае вы никогда не сможете сжать окно (потому что flex позволяет использовать контент, поэтому если контент большой..)
Помочь в развитии проекта:

Другие вопросы

Ответы на ваши вопросы

Закрыть X