在vant 中使用cell组件 定义图标该图片和位置操作
作者：小海龟hy
这篇文章主要介绍了在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" style="width: 3.6rem;"></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组件 定义图标该图片和位置操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。