59 lines
1.2 KiB
Vue
59 lines
1.2 KiB
Vue
<template>
|
|
<view class="search-box" :class="{'shape-circle':shape==='circle'}">
|
|
<view class="search-btn u-flex u-flex-1">
|
|
<image src="@/static/iconImg/icon-search.svg" class="icon-search" />
|
|
<view class="u-flex-1 u-p-l-24"><input v-model="search.keyword" @confirm="confirm" type="text"
|
|
placeholder-style="font-size:28rpx;" :placeholder="placeholder" /></view>
|
|
|
|
</view>
|
|
<view @tap.stop="clear" v-if="search.keyword">
|
|
<uni-icons type="clear" size="16" color="#999"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
reactive
|
|
} from 'vue';
|
|
const props = defineProps({
|
|
placeholder: {
|
|
type:String,
|
|
default:'搜索'
|
|
},
|
|
shape:{
|
|
type:String,
|
|
default:''
|
|
}
|
|
})
|
|
|
|
const search = reactive({
|
|
keyword: "",
|
|
})
|
|
|
|
function clear() {
|
|
search.keyword = ''
|
|
}
|
|
const emits = defineEmits(['confirm'])
|
|
|
|
function confirm(e) {
|
|
emits('confirm', search.keyword)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.search-box {
|
|
background: #F9F9F9;
|
|
padding: 10rpx 30rpx 10rpx 30rpx;
|
|
border-radius: 12rpx;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
&.shape-circle{
|
|
border-radius: 100px;
|
|
}
|
|
.icon-search {
|
|
width: 26rpx;
|
|
height: 26rpx;
|
|
}
|
|
}
|
|
</style> |