使用vant-picker实现自定义内容,根据内容添加图标

 更新时间:2022年12月06日 09:48:12   作者:妍崽崽@  
这篇文章主要介绍了使用vant-picker实现自定义内容,根据内容添加图标,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

前言

在使用vant的框架的时候发现一件事,他的下拉内容只能输入文字,不可以是自定义,比如加图标,所以使用它的class名,然后仿照他的功能给完善了下,可以实现了自定义添加内容

实现效果

vant原来框架的内容:

我经过处理以后的效果图

这里的图片地址没有,如果满足条件,前面就有图片

实现步骤 

1、template部分

我这上面是vant的picker,可以打开看看之前的效果,这里是仿照他的效果实现的功能

 <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;//向上取整,并加上第一个空格
    },

获取数据那里的方法:

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

到此结束~

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue实现扫码功能

    vue实现扫码功能

    这篇文章主要为大家详细介绍了vue实现扫码功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • 通过vue.extend实现消息提示弹框的方法记录

    通过vue.extend实现消息提示弹框的方法记录

    这篇文章主要给大家介绍了关于通过vue.extend实现消息提示弹框的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • Vuex实现购物车小功能

    Vuex实现购物车小功能

    这篇文章主要为大家详细介绍了Vuex实现购物车小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • 详解如何在vue项目中使用eslint+prettier格式化代码

    详解如何在vue项目中使用eslint+prettier格式化代码

    在开发中我们需要一种能够统一团队代码风格的工具,作为强制性的规范,统一整个项目的代码风格,这篇文章主要介绍了详解如何在vue项目中使用eslint+prettier格式化代码,需要的朋友可以参考下
    2018-11-11
  • 深入理解vue中的 slot-scope=“scope“

    深入理解vue中的 slot-scope=“scope“

    这篇文章主要介绍了理解vue中的 slot-scope=“scope“,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 详解vue.js实现全屏显示功能示例

    详解vue.js实现全屏显示功能示例

    这篇文章主要为大家介绍了vue.js实现全屏显示功能示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • vue实现计步器功能

    vue实现计步器功能

    这篇文章主要为大家详细介绍了vue实现计步器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • vue路由拦截器和请求拦截器知识点总结

    vue路由拦截器和请求拦截器知识点总结

    在本篇文章里小编给各位整理的是一篇关于vue路由拦截器和请求拦截器知识点总结文章,有兴趣的朋友们学习下。
    2019-11-11
  • vue实现录音功能js-audio-recorder带波浪图效果的示例

    vue实现录音功能js-audio-recorder带波浪图效果的示例

    这篇文章主要介绍了vue实现录音功能js-audio-recorder带波浪图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • vue项目使用md5加密、crypto-js加密、国密sm3及国密sm4的方法

    vue项目使用md5加密、crypto-js加密、国密sm3及国密sm4的方法

    密码或者其他比较重要东西假如使用明文传输中是很危险的,所以就需要前端一些加密协议,对密码、手机号、身份证号等信息进行保护,下面这篇文章主要给大家介绍了关于vue项目中使用md5加密、crypto-js加密、国密sm3及国密sm4的相关资料,需要的朋友可以参考下
    2022-12-12

最新评论