В VueJS как определить ширину элемента элемента в шаблоне
У меня есть приложение VueJS, которое создает два divs в контейнере div, которые выложены с display:flex
так:
+-------------------------------------------+
| div#app |
| +---------------------+ +---------------+ |
| | | | | |
| | div.a | | div.b | |
| | | | | |
| +---------------------+ +---------------+ |
| |
+-------------------------------------------+
Внутри div.a
- это элемент svg, который также генерируется Vue.
Мне нужно знать размер ширины div.a
для того, чтобы создать подходящий СВГ. Есть идеи, как это выяснить?
У вопроса есть решение - Посмотреть?

Источник

Источник

Источник

@Seblor это сработало! спасибо - вы хотите поставить это в качестве ответа,и я приму?
Источник

Там уже есть правильный ответ, вы можете принять его, я не возражаю :)
Источник
Ответы - В VueJS как определить ширину элемента элемента в шаблоне / In VueJS how to determine the element width of an element within the template
Является ответом!

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>
Обратите внимание, что это не будет отслеживать изменение размера, вам нужно будет измерить его снова, когда происходят изменения размера.

Блестяще, спасибо. Я добавил прослушиватель событий в окне.измените размер, чтобы вызвать пересчет размеров. Обратите внимание также, что нам нужно установить "overflow: hidden" на divs, потому что в противном случае вы никогда не сможете сжать окно (потому что flex позволяет использовать контент, поэтому если контент большой..)
Помочь в развитии проекта: