使用vant-picker實(shí)現(xiàn)自定義內(nèi)容,根據(jù)內(nèi)容添加圖標(biāo)
前言
在使用vant的框架的時(shí)候發(fā)現(xiàn)一件事,他的下拉內(nèi)容只能輸入文字,不可以是自定義,比如加圖標(biāo),所以使用它的class名,然后仿照他的功能給完善了下,可以實(shí)現(xiàn)了自定義添加內(nèi)容
實(shí)現(xiàn)效果
vant原來框架的內(nèi)容:

我經(jīng)過處理以后的效果圖
這里的圖片地址沒有,如果滿足條件,前面就有圖片

實(shí)現(xiàn)步驟
1、template部分
我這上面是vant的picker,可以打開看看之前的效果,這里是仿照他的效果實(shí)現(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])">確認(rèn)</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,//因?yàn)橐粋€(gè)上面有空格的效果,所以初始化從第二個(gè)開始
3、methods部分
//點(diǎn)擊確定事件
onConfirm(value) {
this.enterprise = value;
this.showPicker = false;
}, /**
* 自定義picker得點(diǎn)擊事件
* */
change_picker(item,index) {
this.picker_active=index;
} ,//滾動(dòng)條滾動(dòng)事件
change_picker_scroll(v){
let scrollTop = v.srcElement.scrollTop;
this.picker_active = Math.ceil(scrollTop/44)+1;//向上取整,并加上第一個(gè)空格
},獲取數(shù)據(jù)那里的方法:
this.enterpriseList = this.enterpriseList.map((item) => {
return {
keyId: item.id,
nsrsbh: item.nsrsbh,
text: item.nsrmc,
jfzt:item.jfzt //是否付費(fèi)
};
});
//上面加1行空格
this.enterpriseList.unshift({});到此結(jié)束~
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue對(duì)象添加屬性(key:value)、顯示和刪除屬性方式
這篇文章主要介紹了vue對(duì)象添加屬性(key:value)、顯示和刪除屬性方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07
詳解Vue項(xiàng)目中實(shí)現(xiàn)錨點(diǎn)定位
這篇文章主要介紹了Vue項(xiàng)目中實(shí)現(xiàn)錨點(diǎn)定位,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue配置請(qǐng)求本地json數(shù)據(jù)的方法
這篇文章主要介紹了vue配置請(qǐng)求本地json數(shù)據(jù)的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
vue實(shí)現(xiàn)多個(gè)el-form表單提交統(tǒng)一校驗(yàn)的2個(gè)方法
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)多個(gè)el-form表單提交統(tǒng)一校驗(yàn)的2個(gè)方法,文中通過代碼示例介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
解決vuejs項(xiàng)目里css引用背景圖片不能顯示的問題
今天小編就為大家分享一篇解決vuejs項(xiàng)目里css引用背景圖片不能顯示的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
如何用vue2+element-ui實(shí)現(xiàn)多行行內(nèi)表格編輯
最近開發(fā)項(xiàng)目,關(guān)于表格的數(shù)據(jù)操作比較多,這個(gè)地方個(gè)人覺得比較難搞,特此記錄一下,這篇文章主要給大家介紹了關(guān)于如何用vue2+element-ui實(shí)現(xiàn)多行行內(nèi)表格編輯的相關(guān)資料,需要的朋友可以參考下2024-08-08
vue項(xiàng)目中axios如何捕捉http狀態(tài)碼為401錯(cuò)誤問題
這篇文章主要介紹了vue項(xiàng)目中axios如何捕捉http狀態(tài)碼為401錯(cuò)誤問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03

