使用vant-picker實現(xiàn)自定義內容,根據(jù)內容添加圖標

更新時間：2022年12月06日 09:48:12 作者：妍崽崽@

這篇文章主要介紹了使用vant-picker實現(xiàn)自定義內容，根據(jù)內容添加圖標，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

前言

在使用vant的框架的時候發(fā)現(xiàn)一件事，他的下拉內容只能輸入文字，不可以是自定義，比如加圖標，所以使用它的class名，然后仿照他的功能給完善了下，可以實現(xiàn)了自定義添加內容

實現(xiàn)效果

vant原來框架的內容：

我經(jīng)過處理以后的效果圖

這里的圖片地址沒有，如果滿足條件，前面就有圖片

實現(xiàn)步驟

1、template部分

我這上面是vant的picker，可以打開看看之前的效果，這里是仿照他的效果實現(xiàn)的功能

 <van-popup v-model="showPicker" position="bottom">
<!--        <van-picker-->
<!--          show-toolbar-->
<!--          :columns="enterpriseList"-->
<!--          @cancel="showPicker = false"-->
<!--          @confirm="onConfirm"-->
<!--        >-->
<!--        <an-picker>-->
 
               <compicker-->
                      :enterpriseList="enterpriseList"
                       @cancel="showPicker = false"
                      @onConfirm="onConfirm">
                </compicker>
 
        <div class="van-picker">
          <div class="van-hairline--top-bottom van-picker__toolbar">
            <div class="van-picker__cancel" @click="showPicker = false">取消</div>
            <div class="van-picker__confirm" @click="onConfirm(enterpriseList[picker_active])">確認</div>
          </div>
          <div class="van-picker__columns" style="height: 220px">
            <div class="van-picker-column"
                 @scroll="change_picker_scroll"
                 style="height: 220px;overflow-y: auto;">
              <ul class="transition: all 0ms ease 0s; transform: translate3d(0px, 88px, 0px)"style="line-height: 44px">
                <li :class='{"van-picker-column__item--selected":picker_active==index}'
                    class="van-ellipsis van-picker-column__item"
                    style="height: 44px"
                    @click="change_picker(item,index)"
                    v-for="(item,index) in enterpriseList" :key="index">
<!--                  <img v-if="item.jfzt=='1'" src=""/>-->
                  <span v-if="item.jfzt=='1'"><img src="src"></span>
                  {{item.text}}<>
              </ul>
 
            </div>
          </div>
        </div>
 
 
 
 
      <an-popup>

2、data部分

picker_active:1,//因為要弄一個上面有空格的效果，所以初始化從第二個開始

3、methods部分

//點擊確定事件
onConfirm(value) {
      this.enterprise = value;
      this.showPicker = false;
    },

    /**
     * 自定義picker得點擊事件
     * */
    change_picker(item,index) {
      this.picker_active=index;
    } ,

//滾動條滾動事件
 change_picker_scroll(v){
      let scrollTop = v.srcElement.scrollTop;
      this.picker_active = Math.ceil(scrollTop/44)+1;//向上取整，并加上第一個空格
    },

獲取數(shù)據(jù)那里的方法：

 this.enterpriseList = this.enterpriseList.map((item) => {
              return {
                keyId: item.id,
                nsrsbh: item.nsrsbh,
                text: item.nsrmc,
                jfzt:item.jfzt  //是否付費
 
              };
            });
            //上面加1行空格
            this.enterpriseList.unshift({});

到此結束~