99 lines
1.9 KiB
Vue
99 lines
1.9 KiB
Vue
<template>
|
||
<view class="search-container">
|
||
<view class="search-box">
|
||
<image src="/static/ic_search.png" class="search-icon" mode="aspectFit"></image>
|
||
<input class="search-input" type="text" v-model="keyword" :placeholder="placeholder" confirm-type="search" @confirm="handleSearch" />
|
||
<view class="search-btn" v-if="keyword.length > 0" @click="clearSearch">
|
||
<text class="search-btn-text">×</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, watch } from 'vue';
|
||
|
||
const props = defineProps({
|
||
placeholder: {
|
||
type: String,
|
||
default: '搜索'
|
||
},
|
||
modelValue: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
});
|
||
|
||
const emit = defineEmits(['update:modelValue', 'search', 'clear']);
|
||
|
||
const keyword = ref(props.modelValue);
|
||
|
||
// 监听v-model值变化
|
||
watch(() => props.modelValue, (newVal) => {
|
||
keyword.value = newVal;
|
||
});
|
||
|
||
// 监听内部值变化
|
||
watch(() => keyword.value, (newVal) => {
|
||
emit('update:modelValue', newVal);
|
||
});
|
||
|
||
// 处理搜索
|
||
const handleSearch = () => {
|
||
emit('search', keyword.value);
|
||
};
|
||
|
||
// 清空搜索
|
||
const clearSearch = () => {
|
||
keyword.value = '';
|
||
emit('clear');
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.search-container {
|
||
width: 100%;
|
||
padding: 20rpx 30rpx;
|
||
box-sizing: border-box;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.search-box {
|
||
width: 100%;
|
||
height: 70rpx;
|
||
background-color: #F7F7F7;
|
||
border-radius: 35rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 25rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
}
|
||
|
||
.search-icon {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
height: 70rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.search-btn {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 50%;
|
||
background-color: #d1d1d1;
|
||
}
|
||
|
||
.search-btn-text {
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
}
|
||
</style> |