vant的grid使用时的问题

最新推荐文章于 2024-08-17 11:58:26 发布

原创最新推荐文章于 2024-08-17 11:58:26 发布 · 1.3w 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

收录于

vant 专栏收录该内容

6 篇文章

订阅专栏

本文分享了一次使用Vant-UI框架在移动端项目中遇到的Grid组件Bug及解决方案。Bug表现为页面刷新或出错时，九宫格布局图标异常缩小，通过将图片放入slot中成功解决。

第一次做移动端的项目使用了vant-ui，在用grid组件的时候出了个bug。

在这里插入图片描述

当刷新页面或页面发生错误时，九宫格布局会变成下图这样

在这里插入图片描述

图标突然变小，随便点击一下其它页面就又恢复正常。出现的原因不是太清楚。但是找到了解决方法。
把图片放到slot里就可以了。

// 原来的代码
<van-grid-item text="巡察实施" to="/inspection">
   <img src="../../assets/巡查实施.svg" alt />
</van-grid-item>

// 修改后的代码
<van-grid-item text="巡察实施" to="/inspection">
	<div slot="default">
    	<img src="../../assets/巡查实施.svg" alt />
    </div>
</van-grid-item>