148 lines
3.4 KiB
Vue
148 lines
3.4 KiB
Vue
<template>
|
|
<view class="search-box">
|
|
<view class="jeepay-search" @touchmove.stop.prevent="moveHandle">
|
|
<image src="/static/img/list-search.svg" alt="" /><!--放大镜-->
|
|
<input type="text" v-model="searchText" :placeholder="placeholder" placeholder-style="font-size:28rpx" @focus="focusHandle" @input="changeHandle($event)" :focus="props.isFocus">
|
|
|
|
<!-- 清空图片 -->
|
|
<image @click="clearText" src="../../static/img/clear-test.svg" class="clear-text" mode="" v-if="searchBtn && clearTextIsShow"></image>
|
|
|
|
<view class="btn">
|
|
<!-- <slot v-if="!searchBtn" name="option"></slot> -->
|
|
<view v-if="searchBtn" @click="searchHandle" class="search-text">
|
|
搜索
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
<slot v-if="!searchBtn" name="option" class="slot"></slot>
|
|
</view>
|
|
<view class="mark" @click="hiddenMask" v-show="searchBtn" @touchmove.stop.prevent="moveHandle">
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, nextTick, watch } from 'vue'
|
|
import { onShow } from '@dcloudio/uni-app'
|
|
const props = defineProps({
|
|
value: {type: String, default: null},
|
|
placeholder: {type: String, default: '搜索内容'},
|
|
isFocus:{type: Boolean, default: false}
|
|
})
|
|
|
|
let searchText = ref('') // 搜索内容
|
|
let clearTextIsShow = ref(false) // 清空按钮是否展示
|
|
|
|
// 搜索按钮
|
|
let searchBtn = ref(false)
|
|
// 获得焦点
|
|
const focusHandle = () => {
|
|
searchBtn.value = true
|
|
emit('focusHandle')
|
|
}
|
|
|
|
function hiddenMask() {
|
|
searchBtn.value = false
|
|
}
|
|
onShow(() => {
|
|
hiddenMask();
|
|
})
|
|
//监听搜索框中有无内容
|
|
watch( () => searchText.value, () => {
|
|
if(!searchText.value) {
|
|
clearTextIsShow.value = false
|
|
} else {
|
|
clearTextIsShow.value = true
|
|
}
|
|
})
|
|
watch( () => props.value, () => {
|
|
if(props.value === ''){
|
|
searchText.value = ''
|
|
}
|
|
})
|
|
|
|
// 禁止页码滚动
|
|
const moveHandle = () => {}
|
|
|
|
const emit = defineEmits(['update:value', 'searchHandle','focusHandle','backPressHandel','orderBackPressHandel'])
|
|
const changeHandle = (e) => emit('update:value', e.detail.value)
|
|
const clearText = () => {
|
|
searchText.value = ''
|
|
emit('update:value', '')
|
|
}
|
|
|
|
const searchHandle = () => {
|
|
searchBtn.value = false
|
|
emit('searchHandle')
|
|
}
|
|
const backPressHandel = ()=>{
|
|
if(searchBtn.value){
|
|
searchBtn.value = false
|
|
return true
|
|
}
|
|
return false
|
|
}
|
|
const orderBackPressHandel = ()=>{
|
|
if(searchBtn.value){
|
|
searchBtn.value = false
|
|
}
|
|
}
|
|
defineExpose({ backPressHandel,orderBackPressHandel });
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.mark {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: calc(100vh - 180rpx);
|
|
top: 120rpx;
|
|
left: 0;
|
|
z-index:99;
|
|
background-color: rgba(0,0,0, 0.5);
|
|
}
|
|
.search-box{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #f2f2f2;
|
|
border-bottom: 1rpx solid #e6e6e6;
|
|
|
|
.jeepay-search {
|
|
display: flex;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
align-items:center;
|
|
position: relative;
|
|
height: 70rpx;
|
|
width: 100%;
|
|
background-color: #FFF;
|
|
margin: 20rpx 30rpx 30rpx;
|
|
border-radius: 12rpx;
|
|
|
|
image {
|
|
width: 26rpx;
|
|
height: 26rpx;
|
|
margin-right: 25rpx;
|
|
}
|
|
input {
|
|
flex-grow: 1;
|
|
margin-right: 20rpx;
|
|
}
|
|
.btn{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
.search-text {
|
|
color: $uni-color-primary;
|
|
width: 90rpx;
|
|
}
|
|
.clear-text {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
}
|
|
}
|
|
|
|
</style> |