vant的grid使用时的问题

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

vant的grid使用时的问题_第1张图片

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

vant的grid使用时的问题_第2张图片

图标突然变小,随便点击一下其它页面就又恢复正常。出现的原因不是太清楚。但是找到了解决方法。
把图片放到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>

你可能感兴趣的:(vant,vue)