<template>
|
<div class="search">
|
<div class="search_input">
|
<img src="@/assets/icon/ic_search@2x.png" alt="">
|
<input v-model="text" @keyup.enter="searchInput" type="text" :placeholder="props.placeholder" />
|
</div>
|
<div class="search_operation" v-if="props.isShow">
|
<!-- <img src="@/assets/icon/3@2x.png" alt="">-->
|
<div class="search_operation_w"></div>
|
<img @click="openCate" src="@/assets/icon/@2x.png" alt="">
|
</div>
|
<van-popup v-model:show="open" round position="bottom" :style="{ height: '80%' }">
|
<div class="content">
|
<slot name="content"></slot>
|
</div>
|
<div class="zhanwei"></div>
|
<div class="footer">
|
<div class="footer_close" @click="closes">重置</div>
|
<div class="footer_submit" @click="submit">确定</div>
|
</div>
|
</van-popup>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, defineProps, defineEmits } from 'vue'
|
|
const props = defineProps({
|
isShow: {
|
type: Boolean,
|
required: false,
|
default: false
|
},
|
placeholder: {
|
type: String,
|
required: false,
|
default: '请输入'
|
}
|
})
|
|
// 向父组件提交两个方法
|
const emit = defineEmits(['searchInput', 'submit', 'reset'])
|
|
const open = ref<Boolean>(false)
|
|
const text = ref<string>('')
|
|
// 搜索框搜索
|
const searchInput = () => {
|
emit('searchInput', text.value)
|
}
|
|
const openCate = () => {
|
open.value = true
|
}
|
|
// 重置
|
const closes = () => {
|
open.value = false
|
text.value = ''
|
emit('reset', text.value)
|
}
|
|
// 搜索提交
|
const submit = () => {
|
open.value = false
|
emit('submit', '')
|
}
|
|
// 向父组件暴漏数据
|
defineExpose({
|
text
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.search {
|
width: 100%;
|
height: 68px;
|
display: flex;
|
align-items: center;
|
.zhanwei {
|
height: 180px;
|
background: #ffffff;
|
}
|
.content {
|
padding: 30px 30px 0 30px;
|
}
|
.footer {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding-left: 40px;
|
padding-right: 40px;
|
padding-bottom: 64px;
|
box-sizing: border-box;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
background: #ffffff;
|
z-index: 99;
|
.footer_close {
|
flex: 1;
|
padding: 28px 0;
|
box-sizing: border-box;
|
margin-right: 22px;
|
font-size: 32px;
|
font-weight: 500;
|
color: #999999;
|
background: #F7F7F7;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.footer_submit {
|
flex: 1;
|
padding: 28px 0;
|
box-sizing: border-box;
|
font-size: 32px;
|
font-weight: 500;
|
color: #ffffff;
|
background: $nav-color;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
.search_input {
|
flex: 1;
|
height: 100%;
|
background: #F7F7F7;
|
border-radius: 8px;
|
display: flex;
|
align-items: center;
|
padding: 15px 30px;
|
box-sizing: border-box;
|
img {
|
width: 28px;
|
height: 28px;
|
margin-right: 10px;
|
}
|
input {
|
width: 100%;
|
border: none;
|
outline: none;
|
background: #F7F7F7;
|
font-size: 26px;
|
}
|
input::-webkit-input-placeholder { /* WebKit browsers */
|
font-size: 26px;
|
font-weight: 400;
|
color: #B2B2B2;
|
}
|
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
font-size: 26px;
|
font-weight: 400;
|
color: #B2B2B2;
|
}
|
input::-moz-placeholder { /* Mozilla Firefox 19+ */
|
font-size: 26px;
|
font-weight: 400;
|
color: #B2B2B2;
|
}
|
input:-ms-input-placeholder { /* Internet Explorer 10+ */
|
font-size: 26px;
|
font-weight: 400;
|
color: #B2B2B2;
|
}
|
}
|
.search_operation {
|
flex-shrink: 0;
|
/*width: 150px;*/
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
/*margin-left: 30px;*/
|
img {
|
width: 44px;
|
height: 44px;
|
}
|
.search_operation_w {
|
width: 30px;
|
}
|
}
|
}
|
</style>
|
