0
286
Visualizaçõesnuxt/vue2 cómo establecer el ancho de los divs apilados para que coincidan con un div específico en la pila
No puedo encontrar exactamente la misma pregunta, por lo que si se trata de un duplicado, rediríjame. Estoy trabajando con Nuxt. Tengo un componente de imagen que debería poder manejar diferentes imágenes de diferentes anchos. La imagen cambiará según la vista móvil/de escritorio, lo que significa que la imagen puede volverse más ancha o más estrecha según la pantalla. Debajo y arriba tengo un título y una descripción algo como esto:
<div> //flexbox with flex-direction column and justify center <h2 >{{insightsImage.title}}</h3> <img :src='ifMobile ? mobileImage.url : image.url' /> <p>some tekst could be very long</p> </div>Lo que me gustaria es el titulo y el
tener el mismo ancho máximo que la imagen en TODO momento y que esté centrada en la página. Entonces, si tengo una descripción muy larga, se corta y se apila ordenadamente.
Algo como esto:
He probado varios métodos y tengo una solución que funciona, pero me pregunto si hay una forma mejor, tal vez más vue.
Idealmente, haría esto solo con css, pero no he encontrado ninguna solución que funcione con anchos de imagen variables.
mi solución actual es esta:
<div> <h2 :style='`max-width: ${imageSize}`'>{{insightsImage.title}}</h3> <img :src='ifMobile ? mobileImage.url : image.url' /> <p :style='`max-width: ${imageSize}`'/>some tekst</p> </div> export default defineComponent({ computed: { imageSize(): string { if (!process.browser) return '' // need this because Image object does not exist on server side const image = new Image(); image.src = this.image.url; return `${image.width > 0 ? image.width : 800}px` // need this 0 check because sometimes for some reason it initially returns 0 as width (might be because of SSR), and most images will be minimal 800px wide }De todas las soluciones que he encontrado, esta se siente la MENOS extraña, pero aún no es perfecta.
Investigué el uso de referencias como esta: Uso de $ referencias en una propiedad calculada
Pero los documentos oficiales recomiendan no (abusar) usar referencias en accesorios computados, Y dado que la referencia no se actualiza, el ancho calculado no cambia si la imagen src cambia.
¿Cualquier otra sugerencia?
1 Respostas
Responde à pergunta0
Ok, entonces respondo mi propia pregunta si alguien necesita esto. Todavía no estoy 100% feliz, porque todavía estoy usando estilos en línea (pero tal vez solo soy quisquilloso). Mi solución original no siempre funciona, porque cuando se enruta a la página, el tamaño de la imagen a veces es 0 (como se menciona en un comentario). Después de algunos intentos, finalmente encontré una combinación de usar vue Montado/Actualizado con image.onload para realizar un seguimiento del ancho de la imagen al cambiar el tamaño de la pantalla. Así que terminé con esto:
<div> <h2 :style='`max-width: ${imageSize}`'>{{insightsImage.title}}</h3> <img :src='ifMobile ? mobileImage.url : image.url' /> <p :style='`max-width: ${imageSize}`'/>some tekst</p> </div> export default defineComponent({ data() { return { imageSize: '' } }, updated() { this.updateImageSize() }, mounted() { this.updateImageSize() }, methods: { updateImageSize() { const vm = this const image = new Image() image.src = this.image.url image.onload = function() { vm.imageSize = `${image.width}px` } } } } })