[youzan/vant][Bug Report] Swipe 组件首次加载两倍大

2023-12-20 370 views
9
设备 / 浏览器

edge

Vant 版本

2.12.22

Vue 版本

2.6.10

重现链接

使用到插件postcss-pxtorem,不知道怎么添加

描述问题

image 如图所示 蓝色区域是swipe-item生成的区域,是图片的两倍大正好,因此我猜测和postcss-pxtorem有关,放上我的配置: module.exports = { plugins: { // postcss-pxtorem 插件的版本需要 >= 5.0.0 'postcss-pxtorem': { rootValue({ file }) { return file.indexOf('vant') !== -1 || file.indexOf('dplayer') !== -1 ? 37.5 : 75 }, propList: ['*'], replace: true, remUnit: 37.5, }, 'postcss-cssnext': {}, }, }

回答

5

麻烦提供一个最小复现仓库喔

3

你给 Swipe 组件设置了 width: 169,这个是在 style 属性上设置的 169px,不受 pxtorem 影响。而图片设置的 width 是受到 pxtorem 影响的。

你可以直接在图片上设置 width: 100% 来避免这个问题。

9

我是故意给图片设置宽度来体现bug的,那有办法让Swipe组件也受pxtorem的控制吗

2

我想Swipe和图片一样小,而不是图片和Swipe一样大

8

Swipe 组件没有办法受到 pxtorem 的控制,如果想要做响应式,可以根据屏幕宽度动态计算 width 的值。