95 lines
2.0 KiB
Vue
95 lines
2.0 KiB
Vue
<template>
|
|
<view class="sch-cont">
|
|
<view>
|
|
<u-input shape="circle" :placeholder="placeholder" :modelValue="value" :custom-style="`background-color: ${bgColor};height: ${height}rpx;${true?'padding-right:120rpx;': ''}`"
|
|
font-size="28rpx" placeholder-style="font-size: 28rpx;"
|
|
@focus="handleSwitchFouce" @blur="handleSwitchFouce" @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 && value.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>
|
|
<slot name="rightIcon">
|
|
<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>
|
|
</slot>
|
|
</u-row>
|
|
</u-row>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
timelyTrigger: {
|
|
default () {
|
|
return true
|
|
}
|
|
},
|
|
placeholder: {
|
|
default () {
|
|
return ''
|
|
}
|
|
},
|
|
bgColor: {
|
|
default () {
|
|
return '#FFF'
|
|
}
|
|
},
|
|
height: {
|
|
default () {
|
|
return 38
|
|
}
|
|
},
|
|
value: {
|
|
default () {
|
|
return ''
|
|
}
|
|
},
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
focused: false,
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
onHide() {
|
|
|
|
},
|
|
unmounted() {},
|
|
|
|
methods: {
|
|
handleSwitchFouce() {
|
|
setTimeout(()=> {
|
|
this.focused = !this.focused
|
|
}, 100)
|
|
},
|
|
handleChange(val) {
|
|
this.triggerChange(val, this.timelyTrigger)
|
|
},
|
|
handleClear( ) {
|
|
this.triggerChange('')
|
|
},
|
|
triggerChange(val, isTriggerChange = true) {
|
|
typeof val == 'undefined' && (val = this.value)
|
|
if(isTriggerChange) {
|
|
this.$emit('change', val)
|
|
}
|
|
this.$emit('update:value', val)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.sch-cont{
|
|
position: relative;
|
|
}
|
|
</style> |