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 구성 요 소 를 사용 하여 아이콘 을 정의 합 니 다.이 그림 과 위치 작업 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 이 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.