71 lines
1.2 KiB
Vue
71 lines
1.2 KiB
Vue
<template>
|
|
<view class="input-group">
|
|
<view class="general-label">{{ label }}</view>
|
|
<input
|
|
class="scan-input"
|
|
:value="value"
|
|
:placeholder="placeholder"
|
|
:disabled="disabled"
|
|
@input="$emit('input', $event.target.value)"
|
|
/>
|
|
<view v-if="showScanBtn" class="scan-btn" @click="$emit('scan')">
|
|
<text>{{ scanBtnText }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
label: String,
|
|
value: [String, Number],
|
|
placeholder: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
showScanBtn: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
scanBtnText: {
|
|
type: String,
|
|
default: '扫码'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.input-group {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.general-label {
|
|
width: 150rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
.scan-input {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
padding: 0 20rpx;
|
|
border: 1px solid #eee;
|
|
border-radius: 8rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
.scan-btn {
|
|
margin-left: 20rpx;
|
|
padding: 0 20rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
background-color: #2979ff;
|
|
color: #fff;
|
|
border-radius: 8rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
</style> |