96 lines
2.2 KiB
Vue
96 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<view class="search-input-container" :style="{ 'backgroundColor': themeStore.theme.bgColor }">
|
||
|
|
<view class="search-input-view flex-acenter" :style="{ 'background-color': themeStore.theme.input.bgColor }">
|
||
|
|
<view class="search-input">
|
||
|
|
<input
|
||
|
|
v-if="!readOnly"
|
||
|
|
:value="modelValue"
|
||
|
|
:maxlength="20"
|
||
|
|
:border="false"
|
||
|
|
style="font-size: 26rpx"
|
||
|
|
:placeholder="placeholder"
|
||
|
|
:placeholder-style="`font-size: 26rpx; color: ${themeStore.theme.input.placeholder}`"
|
||
|
|
@input="handleInput"
|
||
|
|
/>
|
||
|
|
<view v-else style="font-size: 30rpx" :style="{ 'color': themeStore.theme.input.placeholder }" @click.stop="handleClick">{{ placeholder }}</view>
|
||
|
|
</view>
|
||
|
|
<view v-if="modelValue && modelValue.length" @click.stop="handleClearClick">
|
||
|
|
<theme-image class="clear-icon" src="@/static/search/icon-search-clear.png" mode="aspectFit"></theme-image>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<theme-image class="search-icon" src="@/static/icon-search-yellow.png" mode="aspectFit" @click="handleSearchClick"></theme-image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { reactive, ref } from 'vue'
|
||
|
|
import { useThemeStore } from '@/store/useThemeStore'
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
readOnly: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
modelValue: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
placeholder: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
}
|
||
|
|
})
|
||
|
|
const emit = defineEmits(['update:modelValue', 'search', 'searchClick', 'change'])
|
||
|
|
|
||
|
|
const themeStore = useThemeStore()
|
||
|
|
|
||
|
|
const handleSearchClick = () => {
|
||
|
|
emit('search', props.modelValue)
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleClick = () => {
|
||
|
|
emit('searchClick')
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleClearClick = () => {
|
||
|
|
emit('update:modelValue', '')
|
||
|
|
emit('change', '')
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleInput = (e) => {
|
||
|
|
emit('update:modelValue', e.detail.value)
|
||
|
|
emit('change', e.detail.value)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.search-input-container {
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.search-input-view {
|
||
|
|
border-radius: 20rpx;
|
||
|
|
padding: 0rpx 30rpx;
|
||
|
|
height: 90rpx;
|
||
|
|
|
||
|
|
.search-input {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-icon {
|
||
|
|
width: 48rpx;
|
||
|
|
height: 48rpx;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.clear-icon {
|
||
|
|
width: 45rpx;
|
||
|
|
height: 45rpx;
|
||
|
|
flex-shrink: 0;
|
||
|
|
margin-right: 30rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|