128 lines
2.9 KiB
Vue
128 lines
2.9 KiB
Vue
<template>
|
|
<view class="scan_wraper">
|
|
<view class="zd-row">
|
|
<view class="zd-col-24 zd-row jcflexstart" @tap="focusState=true">
|
|
<view v-show="scanList.length" class="scaned_font">{{scanList.join()+','}}</view>
|
|
<input
|
|
type="text"
|
|
class="search_input"
|
|
confirm-type="go"
|
|
v-model="value"
|
|
:focus="focusState"
|
|
@focus="handleFocus"
|
|
@blur="handleBlur"
|
|
@confirm="handleSend">
|
|
</view>
|
|
<uni-icons v-show="scanList.length" class="mgr20" type="clear" size="24" color="#666" @tap="toDel"></uni-icons>
|
|
<uni-icons type="scan" size="22" :color="focusState ? '#D7592F' : '#666'" @tap="focusState=true"></uni-icons>
|
|
</view>
|
|
<view v-show="scanList.length > 0 && show" class="scan_list_select">
|
|
<view class="pop_arrow"></view>
|
|
<view class="zd-row" v-for="(e, i) in scanList" :key="i">
|
|
<view class="scan_list_item">{{e}}</view>
|
|
<uni-icons type="clear" size="20" color="#666" @tap="toDelItem(i)"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import permision from "@/utils/permission.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
focusState: false,
|
|
scanList: [],
|
|
value: '',
|
|
show: false
|
|
};
|
|
},
|
|
methods: {
|
|
handleFocus () {
|
|
this.focusState = true
|
|
this.show = true
|
|
},
|
|
handleBlur () {
|
|
this.focusState = false
|
|
if (this.value) {
|
|
this.scanList.push(this.value)
|
|
this.value = ''
|
|
this.$emit('getScanlist', this.scanList)
|
|
}
|
|
this.show = false
|
|
},
|
|
toDel () {
|
|
this.value = ''
|
|
this.scanList = []
|
|
// setTimeout(()=> {
|
|
// this.focusState = true
|
|
// }, 100)
|
|
},
|
|
toDelItem (i) {
|
|
this.scanList.splice(i, 1)
|
|
this.$emit('getScanlist', this.scanList)
|
|
setTimeout(()=> {
|
|
this.focusState = true
|
|
}, 100)
|
|
},
|
|
handleSend (e) {
|
|
if (this.value) {
|
|
this.scanList.push(this.value)
|
|
this.value = ''
|
|
}
|
|
setTimeout(()=> {
|
|
this.focusState = true
|
|
}, 100)
|
|
this.$emit('getScanlist', this.scanList)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
@import '../common/style/mixin.styl';
|
|
.scan_wraper
|
|
position relative
|
|
_wh(100%, 80rpx)
|
|
border: 1px solid #dcdfe6;
|
|
background-color: #fff;
|
|
border-radius: 10rpx;
|
|
padding: 0 10rpx
|
|
.search_input
|
|
width 50%
|
|
height 80rpx;
|
|
_font(28rpx, 80rpx, #606266,,)
|
|
border: 0;
|
|
background-color: transparent;
|
|
.scaned_font
|
|
max-width 50%
|
|
_font(26rpx, 60rpx, #606266,,)
|
|
white-space nowrap
|
|
text-overflow ellipsis
|
|
overflow hidden
|
|
margin-right 6rpx
|
|
.scan_list_select
|
|
position absolute
|
|
top calc(100% + 12px)
|
|
left 0
|
|
z-index 3
|
|
width 100%
|
|
background-color: #FFFFFF;
|
|
border: 1px solid #EBEEF5;
|
|
border-radius: 6px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
padding: 8rpx 10rpx
|
|
.pop_arrow
|
|
position absolute
|
|
top: -12px
|
|
left: 10%
|
|
border: 6px solid #EBEEF5;
|
|
width: 0;
|
|
height: 0;
|
|
border-top-color: transparent;
|
|
border-left-color: transparent;
|
|
border-right-color: transparent;
|
|
.scan_list_select
|
|
_font(26rpx, 80rpx, #606266,,)
|
|
</style>
|