You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

59 lines
1.8 KiB

<template>
<view class="head-bar">
<picker class="hb-picker" :range="range" :range-key="rangeKey" @change="$emit('change', $event)">
<view class="hp-frame">
<input class="hf-ipt" type="text" disabled :value="value" :placeholder="placeholder">
<image class="hf-icon" mode="aspectFit" src="/subpackage/verification/static/images/arrow_c9f.png"></image>
</view>
</picker>
<image v-if="search" class="hb-icon" mode="aspectFit" src="/subpackage/verification/static/images/search.png" @click="$emit('click:search')"></image>
</view>
</template>
<script>
export default {
props: {
value: { type: String, default: '' },
placeholder: { type: String, default: '' },
range: { type: Array, default: [] },
rangeKey: { type: String, default: '' },
search: { type: Boolean, default: false }
}
}
</script>
<style lang="scss">
.head-bar{
padding-left: 24upx;
padding-right: 24upx;
height: 144upx;
background: #fff;
@include ctf(space-between);
.hb-picker{
flex-grow: 1;
.hp-frame{
padding: 0 24upx;
height: 92upx;
background: #f2f2f7;
@include ctf(space-between);
.hf-ipt{
flex-grow: 1;
height: 100%;
@include flcw(28upx, 40upx, #333);
}
.hf-icon{
flex-shrink: 0;
width: 28upx;
height: 28upx;
}
}
}
.hb-icon{
flex-shrink: 0;
margin-right: 16upx;
margin-left: 26upx;
width: 40upx;
height: 40upx;
}
}
</style>