Vue 中如何根据当前屏幕宽度动态计算某个属性的值

👨🏻‍💻 热爱摄影的程序员
👨🏻‍🎨 喜欢编码的设计师
🧕🏻 擅长设计的剪辑师
🧑🏻‍🏫 一位高冷无情的编码爱好者
大家好，我是 DevOps 工程师
欢迎分享 / 收藏 / 赞 / 在看！

【需求】控制 multipleSize 属性，根据屏幕宽度动态计算并赋值，值为当前屏幕宽度的三分之一

【解决】要动态计算 multipleSize 属性的值，可以在 Vue.js 的 mounted 生命周期钩子函数中访问屏幕宽度，然后将其除以 3，将结果赋给 multipleSize 属性。可以按照以下方式修改组件代码：

在这个修改后的代码中，multipleSize 的初始值为 0，然后在 mounted 生命周期钩子函数中计算屏幕宽度并赋值给 multipleSize。Math.floor() 函数用于将结果向下取整，以避免出现小数点。请注意，在这种方法中，multipleSize 只会在组件被挂载时计算一次。如果您需要在窗口大小改变时更新 multipleSize，则可以使用窗口 resize 事件监听器来更新它。

<template>
	<view>
		<view class="album">
			<view class="album__content">
				<u--text text="uView UI" type="primary" bold size="17"></u--text>
				<u--text margin="0 0 8px 0" text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"></u--text>
				<u-album :urls="image" :multipleSize="multipleSize"></u-album>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				multipleSize: 0, // 初始值为0
				image: ['https://cdn.uviewui.com/uview/album/1.jpg', 'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg', 'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg', 'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg', 'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg', 'https://cdn.uviewui.com/uview/album/10.jpg'
				]
			};
		},
		mounted() {
			// 计算multipleSize属性的值
			this.multipleSize = Math.floor(window.innerWidth / 3.25);
		}
	};
</script>

<style lang="scss">
	.album {
		@include flex;
		align-items: flex-start;

		&__avatar {
			background-color: $u-bg-color;
			padding: 5px;
			border-radius: 3px;
		}

		&__content {
			margin-left: 10px;
			flex: 1;
		}
	}
</style>