在vant 中使用cell元件 定義圖示該圖片和位置操作
阿新 • • 發佈:2020-11-03
@本來想直接使用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元件 定義圖示該圖片和位置操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。