arco-design / arco-design-vue

A Vue.js 3 UI Library based on Arco Design
https://arco.design/vue
MIT License
2.75k stars 539 forks source link

请问arco组件怎么使用viewport单位做多窗口适配? #3300

Open WANG-Fan0912 opened 2 months ago

WANG-Fan0912 commented 2 months ago

Basic Info

Steps to reproduce

例如:a-layout-sider,我给定了:width: 102,这个如何转为viewport单位? <a-layout-sider :width="102"><Menu /></a-layout-sider> <a-image width="100" :src="item.photo" /> image

上面只是提供了一个案例,arco中的ui组件大部分场景下都提供了:width这种属性,而且这些属性只支持number类型,我无法通过自定义函数来将单位转换为viewport,例如:a-image、输入框、icon等,有些地方是可以通过属性手动设置,有些地方没法设置大小,请问这种多端兼容有解决方案吗?

WANG-Fan0912 commented 2 months ago

我想到的是利用屏幕大小和元素宽度来计算他们的比例,每次窗口大小发生变化,获取窗口大小*比例来获取最新的宽度