使用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项目中使用eslint+prettier格式化代码
在开发中我们需要一种能够统一团队代码风格的工具,作为强制性的规范,统一整个项目的代码风格,这篇文章主要介绍了详解如何在vue项目中使用eslint+prettier格式化代码,需要的朋友可以参考下2018-11-11vue实现录音功能js-audio-recorder带波浪图效果的示例
这篇文章主要介绍了vue实现录音功能js-audio-recorder带波浪图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08vue项目使用md5加密、crypto-js加密、国密sm3及国密sm4的方法
密码或者其他比较重要东西假如使用明文传输中是很危险的,所以就需要前端一些加密协议,对密码、手机号、身份证号等信息进行保护,下面这篇文章主要给大家介绍了关于vue项目中使用md5加密、crypto-js加密、国密sm3及国密sm4的相关资料,需要的朋友可以参考下2022-12-12
最新评论