95 lines
1.9 KiB
Vue
95 lines
1.9 KiB
Vue
<template>
|
|
<view class="sch-cont">
|
|
<view>
|
|
<u-input shape="circle" :placeholder="placeholder" v-model="keyword" :custom-style="`background-color: ${bgColor};height: ${height}rpx;${true?'padding-right:120rpx;': ''}`"
|
|
font-size="28rpx" placeholder-style="font-size: 28rpx;"
|
|
@focus="handleSwitchFouce()" @blur="handleSwitchFouce()" @confirm="triggerChange()" @change="handleChange()">
|
|
</u-input>
|
|
<u-row justify="end" custom-style="position: absolute;width: 120rpx;top: 0;bottom: 0;right: 20rpx;">
|
|
<u-row justify="end" customStyle="height: 100%;width:100%;">
|
|
<u-row v-if="focused && keyword.length > 0" @click="handleClear()" justify="end" style="0 20rpx 0 0;height: 100%;flex: 1;">
|
|
<u-icon color="#999" name="close-circle-fill" size="36"></u-icon>
|
|
</u-row>
|
|
<u-row @click="triggerChange()" justify="end" style="height: 100%;flex: 1;">
|
|
<u-icon name="search" size="40" margin="0 0 0 20rpx"></u-icon>
|
|
</u-row>
|
|
</u-row>
|
|
</u-row>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
timelyTrigger: {
|
|
default () {
|
|
return true
|
|
}
|
|
},
|
|
placeholder: {
|
|
default () {
|
|
return ''
|
|
}
|
|
},
|
|
bgColor: {
|
|
default () {
|
|
return '#f2f2f2'
|
|
}
|
|
},
|
|
height: {
|
|
default () {
|
|
return 38
|
|
}
|
|
},
|
|
value: {
|
|
default () {
|
|
return ''
|
|
}
|
|
},
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
focused: false,
|
|
keyword: this.value
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
onHide() {
|
|
|
|
},
|
|
destroyed() {},
|
|
|
|
methods: {
|
|
handleSwitchFouce() {
|
|
setTimeout(()=> {
|
|
this.focused = !this.focused
|
|
}, 100)
|
|
},
|
|
handleChange() {
|
|
if(this.timelyTrigger) {
|
|
this.triggerChange()
|
|
}
|
|
},
|
|
handleClear( ) {
|
|
this.keyword = ''
|
|
this.triggerChange()
|
|
},
|
|
triggerChange() {
|
|
let val = this.keyword
|
|
this.$emit('change', val)
|
|
this.$emit('update:value', val)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.sch-cont{
|
|
position: relative;
|
|
}
|
|
</style> |