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