在vant中使⽤cell组件定义图标该图⽚和位置操作
@本来想直接使⽤icon组件，使⽤阿⾥的图标库，可是怎么弄也不⾏，折腾⼀下午，最后决定使⽤最笨的办法，直接上代码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>
icon图标库<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=""
: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组件定义图标该图⽚和位置操作就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。