溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vant 使用cell組件實現(xiàn)定義圖標(biāo)該圖片和位置操作

發(fā)布時間：2020-11-03 14:59:13 來源：億速云 閱讀：2426 作者：Leah 欄目：開發(fā)技術(shù)

這篇文章運(yùn)用簡單易懂的例子給大家介紹vant 使用cell組件實現(xiàn)定義圖標(biāo)該圖片和位置操作，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

vant 中使用cell組件 定義圖標(biāo)該圖片和位置像微信信息欄一樣

<div>
 <van-cell-group class="vanCellGroupClass"><!--../../assets/tou.png-->
 <!--<van-cell icon="" title="二級經(jīng)營單位" value="未完成" size="large" label="二級經(jīng)營單位" class="vanCellClass" />-->
 <van-cell value="未完成" label="描述信息">
  <template slot="title">
  <div class="c1"><img src="../../assets/img/tou.png" ></div>
  <span class="custom-text">二級經(jīng)營單位</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;
 }

主要百度上的方法都試過了，實在沒有辦法。

補(bǔ)充知識：vant Grid組件圖片加載問題 無法加載本地圖片解決方案

我們引入圖片直接用官網(wǎng)給的icon來加載案圖片

vant 使用cell組件實現(xiàn)定義圖標(biāo)該圖片和位置操作

<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:"女性專區(qū)",
  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:"關(guān)于愛情",
  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:"送禮服務(wù)",
  icon:"scoped",
  photo:require('../assets/cyimages/images/1indexjg7_05.png')
  },
  {
  text:"侍酒專區(qū)",
  icon:"sh",
  photo:require('../assets/cyimages/images/1indexjg8_05.png')
  }, 
 ]

關(guān)于vant 使用cell組件實現(xiàn)定義圖標(biāo)該圖片和位置操作就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手