溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章運用簡單易懂的例子給大家介紹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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
