mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-24 09:02:52 +08:00
优化电投投被保人工作单位输入组件
This commit is contained in:
mengxiaolong
213
src/components/common/SearchField.vue
Normal file
213
src/components/common/SearchField.vue
Normal file
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div class="search_box">
|
||||
<van-field :label="label">
|
||||
<template #input>
|
||||
<input
|
||||
style="width: 100%; border: none;"
|
||||
type="text"
|
||||
:placeholder="placeholder"
|
||||
:value="searchContent"
|
||||
@focus="onInputFocus"
|
||||
@blur="onInputBlur"
|
||||
@input="onInput"
|
||||
/>
|
||||
<transition name="slide-in">
|
||||
<div ref="picker" class="content_info" v-show="showCustomer">
|
||||
<div
|
||||
class="border_item van-hairline--bottom"
|
||||
v-for="(item, index) in computedCustomerList"
|
||||
:value="item.label"
|
||||
:key="index"
|
||||
@click="chooseCustomer(item)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
<div class="border_item" v-show="computedCustomerList == 0">
|
||||
无结果
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
</van-field>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Field } from 'vant'
|
||||
export default {
|
||||
name: 'SearchField',
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
default: '标题'
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请输入内容'
|
||||
},
|
||||
value: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
components: {
|
||||
[Field.name]: Field
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showCustomer: false,
|
||||
customerList: [
|
||||
{ label: '北部湾银行' },
|
||||
{ label: '广投新材料集团' },
|
||||
{ label: '广投资本管理有限公司' },
|
||||
{ label: '广投资本管理集团有限公司' },
|
||||
{ label: '广西广投健康产业集团有限公司' },
|
||||
{ label: '广西广投能源集团有限公司' },
|
||||
{ label: '广西广投银海铝业集团有限公司' },
|
||||
{ label: '广西来宾银海铝业有限责任公司' },
|
||||
{ label: '广西旅游发展集团有限公司' },
|
||||
{ label: '广西日报传媒集团有限公司' },
|
||||
{ label: '广西水利电力勘测设计研究院有限责任公司' },
|
||||
{ label: '广西投资集团北海发电有限公司' },
|
||||
{ label: '广西投资集团金融控股有限公司' },
|
||||
{ label: '广西投资集团有限公司' },
|
||||
{ label: '广西投资集团咨询有限公司' },
|
||||
{ label: '广西梧州中恒集团股份有限公司' },
|
||||
{ label: '广西盐业集团有限公司' },
|
||||
{ label: '桂林银行' },
|
||||
{ label: '国海证券股份有限公司' },
|
||||
{ label: '皇氏集团股份有限公司 ' },
|
||||
{ label: '柳州钢铁集团' },
|
||||
{ label: '柳州银海铝' },
|
||||
{ label: '龙光地产' },
|
||||
{ label: '南宁港昌房地产有限公司' },
|
||||
{ label: '数字广西集团有限公司' },
|
||||
{ label: '万丽酒店' },
|
||||
{ label: '广西数字金服科技有限公司' },
|
||||
{ label: '广西数广云商科技有限公司' },
|
||||
{ label: '广西数广康云医药科技有限公司' },
|
||||
{ label: '广西数广全网融合科技有限公司' },
|
||||
{ label: '广西数广网安科技有限公司' },
|
||||
{ label: '广西数广日海物联科技有限公司' },
|
||||
{ label: '广西数字奇安技术服务有限公司' },
|
||||
{ label: '广西数字医疗科技有限公司' },
|
||||
{ label: '广西数广必达云科技发展有限公司' },
|
||||
{ label: '云上广西网络科技有限公司' },
|
||||
{ label: '广西数广迈越科技有限公司' },
|
||||
{ label: '广西慧云信息技术有限公司' },
|
||||
{ label: '云宝宝大数据发展有限责任公司' },
|
||||
{ label: '广西梯度信息科技有限公司' },
|
||||
{ label: '广西广投康养有限公司' },
|
||||
{ label: '广西投资集团璧华物业管理有限公司' },
|
||||
{ label: '广西龙象谷投资有限公司' },
|
||||
{ label: '广西金融投资集团有限公司' },
|
||||
{ label: '北部湾金融租赁有限公司' },
|
||||
{ label: '广西中小企业融资担保有限公司' },
|
||||
{ label: '南宁市金通小额贷款有限公司' },
|
||||
{ label: '广西金控资产管理有限公司' },
|
||||
{ label: '广西金投互联网金融服务有限公司' },
|
||||
{ label: '广西金融投资集团城建发展有限公司' },
|
||||
{ label: '广西大数据产业发展有限公司' },
|
||||
{ label: '广西金投环境科技有限公司' },
|
||||
{ label: '北部湾财富管理有限公司' },
|
||||
{ label: '广西广投鼎新引导基金运营有限责任公司' },
|
||||
{ label: '广西产业发展基金管理有限公司' },
|
||||
{ label: '广西中小企业创业投资有限公司' },
|
||||
{ label: '广西北部湾股权投资基金管理有限公司' },
|
||||
{ label: '广西通盛融资租赁有限公司' },
|
||||
{ label: '广西投资集团融资担保有限公司' },
|
||||
{ label: '南宁市广源小额贷款有限责任公司' },
|
||||
{ label: '广西广投资产管理有限公司' },
|
||||
{ label: '南宁职业技术学院' },
|
||||
{ label: '广西南南铝加工有限公司' },
|
||||
{ label: '小鹏汽车' }
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
computedCustomerList() {
|
||||
let searchStr = this.value.trim()
|
||||
return this.customerList.filter(item => {
|
||||
return item.label.includes(searchStr)
|
||||
})
|
||||
},
|
||||
searchContent() {
|
||||
return this.value
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onInput(event) {
|
||||
this.value = event.target.value
|
||||
this.$emit('input', this.value)
|
||||
},
|
||||
onInputBlur() {
|
||||
this.showCustomer = false
|
||||
this.$emit('input', this.value)
|
||||
},
|
||||
onInputFocus() {
|
||||
this.showCustomer = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.picker.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
})
|
||||
},
|
||||
chooseCustomer(item) {
|
||||
this.searchContent = item.label
|
||||
this.$emit('input', item.label)
|
||||
this.showCustomer = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.border_item {
|
||||
padding: 5px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.search_box {
|
||||
position: relative;
|
||||
}
|
||||
.content_info {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background: white;
|
||||
border-radius: 0 0 6px 6px;
|
||||
top: 34px;
|
||||
max-height: 120px;
|
||||
overflow: scroll;
|
||||
box-shadow: 0 3px 2px 2px #eee;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/deep/ .van-cell {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/deep/ .van-cell__value {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.slide-in-enter,
|
||||
.slide-in-leave-to {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 44px;
|
||||
}
|
||||
|
||||
.slide-in-leave,
|
||||
.slide-in-enter-to {
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
top: 34px;
|
||||
}
|
||||
|
||||
.slide-in-enter-active,
|
||||
.slide-in-leave-active {
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user