13 changed files with 593 additions and 179 deletions
@ -0,0 +1,106 @@ |
|||||
|
<style lang="scss" scoped> |
||||
|
.dPicker.u-popup{ |
||||
|
.u-popup__content{ |
||||
|
&>.btns{ |
||||
|
display:flex; |
||||
|
justify-content: space-between; |
||||
|
padding:10rpx; |
||||
|
} |
||||
|
|
||||
|
picker-view{ |
||||
|
height:500rpx; |
||||
|
picker-view-column{ |
||||
|
view.item{ |
||||
|
padding:0 30rpx; |
||||
|
display:flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-evenly; |
||||
|
.name{ |
||||
|
display:flex; |
||||
|
align-items: center; |
||||
|
text{ |
||||
|
font-size:16rpx; |
||||
|
&:first-child{ |
||||
|
color:#fff; |
||||
|
background:#10C176; |
||||
|
border-radius:0 20rpx 0 20rpx; |
||||
|
width:80rpx; |
||||
|
height:34rpx; |
||||
|
text-align: center; |
||||
|
line-height: 34rpx; |
||||
|
margin-right:16rpx; |
||||
|
} |
||||
|
&:nth-child(2){ |
||||
|
font-weight: bold; |
||||
|
font-size:20rpx; |
||||
|
} |
||||
|
&:nth-child(3){ |
||||
|
color:#999; |
||||
|
margin-left:6rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.company{ |
||||
|
font-size:16rpx; |
||||
|
&:before{ |
||||
|
content:attr(data-name); |
||||
|
color:#FBA83C; |
||||
|
margin-right:20rpx; |
||||
|
} |
||||
|
&:after{ |
||||
|
content:attr(data-company); |
||||
|
color:#999999; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
<template> |
||||
|
<u-popup class="dPicker" :show="show" @close="show=false"> |
||||
|
<view class="btns"> |
||||
|
<button class="cu-btn sm" @click="show=false">取消</button> |
||||
|
<button class="cu-btn sm bg-green" @click="$emit('select',list[changeVal||value]);show=false">确定</button> |
||||
|
</view> |
||||
|
<picker-view :value="[value]" indicator-style="height:90rpx;" @change="changeVal=$event.detail.value[0]"> |
||||
|
<picker-view-column> |
||||
|
<view v-for="(v,k) in list" :key="k" class="item" style="height:90rpx;"> |
||||
|
<view class="name"><text>{{v.goodsName}}</text><text>{{v.detailedType}}</text></view> |
||||
|
<view class="company" :data-name="v.detailedParentName" :data-company="v.supplier"/> |
||||
|
</view> |
||||
|
</picker-view-column> |
||||
|
</picker-view> |
||||
|
</u-popup> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default{ |
||||
|
props:{ |
||||
|
list:{ |
||||
|
type:Array, |
||||
|
default:()=>[] |
||||
|
}, |
||||
|
value:{ |
||||
|
type:Number, |
||||
|
default:0, |
||||
|
}, |
||||
|
}, |
||||
|
data(){ |
||||
|
return{ |
||||
|
show:false, |
||||
|
changeVal:null, |
||||
|
} |
||||
|
}, |
||||
|
watch:{ |
||||
|
show(n){ |
||||
|
if(!n){ |
||||
|
this.changeVal=null |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
methods:{ |
||||
|
|
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,81 @@ |
|||||
|
{ |
||||
|
"id": "d-picker", |
||||
|
"displayName": "d-picker", |
||||
|
"version": "1.0.0", |
||||
|
"description": "d-picker", |
||||
|
"keywords": [ |
||||
|
"d-picker" |
||||
|
], |
||||
|
"repository": "", |
||||
|
"engines": { |
||||
|
"HBuilderX": "^3.1.0" |
||||
|
}, |
||||
|
"dcloudext": { |
||||
|
"type": "component-vue", |
||||
|
"sale": { |
||||
|
"regular": { |
||||
|
"price": "0.00" |
||||
|
}, |
||||
|
"sourcecode": { |
||||
|
"price": "0.00" |
||||
|
} |
||||
|
}, |
||||
|
"contact": { |
||||
|
"qq": "" |
||||
|
}, |
||||
|
"declaration": { |
||||
|
"ads": "", |
||||
|
"data": "", |
||||
|
"permissions": "" |
||||
|
}, |
||||
|
"npmurl": "" |
||||
|
}, |
||||
|
"uni_modules": { |
||||
|
"dependencies": [], |
||||
|
"encrypt": [], |
||||
|
"platforms": { |
||||
|
"cloud": { |
||||
|
"tcb": "u", |
||||
|
"aliyun": "u" |
||||
|
}, |
||||
|
"client": { |
||||
|
"Vue": { |
||||
|
"vue2": "u", |
||||
|
"vue3": "u" |
||||
|
}, |
||||
|
"App": { |
||||
|
"app-vue": "u", |
||||
|
"app-nvue": "u" |
||||
|
}, |
||||
|
"H5-mobile": { |
||||
|
"Safari": "u", |
||||
|
"Android Browser": "u", |
||||
|
"微信浏览器(Android)": "u", |
||||
|
"QQ浏览器(Android)": "u" |
||||
|
}, |
||||
|
"H5-pc": { |
||||
|
"Chrome": "u", |
||||
|
"IE": "u", |
||||
|
"Edge": "u", |
||||
|
"Firefox": "u", |
||||
|
"Safari": "u" |
||||
|
}, |
||||
|
"小程序": { |
||||
|
"微信": "u", |
||||
|
"阿里": "u", |
||||
|
"百度": "u", |
||||
|
"字节跳动": "u", |
||||
|
"QQ": "u", |
||||
|
"钉钉": "u", |
||||
|
"快手": "u", |
||||
|
"飞书": "u", |
||||
|
"京东": "u" |
||||
|
}, |
||||
|
"快应用": { |
||||
|
"华为": "u", |
||||
|
"联盟": "u" |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1 @@ |
|||||
|
# d-picker |
||||
Loading…
Reference in new issue