👨🏻💻 热爱摄影的程序员
👨🏻🎨 喜欢编码的设计师
🧕🏻 擅长设计的剪辑师
🧑🏻🏫 一位高冷无情的编码爱好者
大家好,我是 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>