这篇文章运用简单易懂的例子给大家介绍vant 使用cell组件实现定义图标该图片和位置操作，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
vant 中使用cell组件 定义图标该图片和位置像微信信息栏一样
<div> <van-cell-group class="vanCellGroupClass"><!--../../assets/tou.png--> <!--<van-cell icon="" title="二级经营单位" value="未完成" size="large" label="二级经营单位" class="vanCellClass" />--> <van-cell value="未完成" label="描述信息"> <template slot="title"> <div class="c1"><img src="../../assets/img/tou.png" ></div> <span class="custom-text">二级经营单位</span> </template> </van-cell> </van-cell-group> <br> </div>
//css样式，给cell部分从新定义了css样式
.van-cell__value {
color: #e6210c;
font-weight: bold;
font-size: 1rem;
overflow: hidden;
text-align: right;
line-height: 3.0625rem;
flex: 1;
position: relative;
vertical-align: middle;
}
.van-cell__title{
position: relative;
flex: 2;
}
.c1{
width: 0.625rem;
height: 0.625rem;
}
.van-cell__label[data-v-5ff568b8] {
font-size: 1rem;
line-height: 1.1rem;
padding-left: 4.3rem;
}.custom-text{
font-size: 1.2rem;
margin-left: 4.3rem;
}主要百度上的方法都试过了，实在没有办法。
补充知识：vant Grid组件图片加载问题 无法加载本地图片解决方案
我们引入图片直接用官网给的icon来加载案图片
<van-grid square>
<van-grid-item
v-for="(item,index) in gridtextlist"
:key="index"
:text="item.text"
:icon="item.photo"
/>
{{item}}
</van-grid>然后我们图片地址得用require包一下
gridtextlist:[
{
text:"女性专区",
icon:"n",
photo:require('../assets/cyimages/images/1indexjg1_05.png')
},
{
text: "无醇",
icon:"w",
photo:require('../assets/cyimages/images/1indexjg2_05.png')
},
{
text:"聚会畅想",
icon:"j",
photo:require('../assets/cyimages/images/1indexjg3_05.png')
},
{
text:"关于爱情",
icon:"g",
photo:require('../assets/cyimages/images/1indexjg4_05.png')
},
{
text:"火锅绝配",
icon:"h",
photo:require('../assets/cyimages/images/1indexjg5_05.png')
},
{
text:"套餐推荐",
icon:"template",
photo:require('../assets/cyimages/images/1indexjg6_05.png')
},
{
text:"送礼服务",
icon:"scoped",
photo:require('../assets/cyimages/images/1indexjg7_05.png')
},
{
text:"侍酒专区",
icon:"sh",
photo:require('../assets/cyimages/images/1indexjg8_05.png')
},
]关于vant 使用cell组件实现定义图标该图片和位置操作就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
