87 lines
1.7 KiB
Vue
87 lines
1.7 KiB
Vue
<template>
|
|
<section class="search-container">
|
|
<van-search
|
|
v-model="value"
|
|
:placeholder="placeholder"
|
|
style="--van-search-padding: 0"
|
|
@search="handleSearchActino"
|
|
>
|
|
</van-search>
|
|
<p class="search" @click="handleSearchActino">
|
|
搜索
|
|
</p>
|
|
<!-- <el-text>搜索</el-text>-->
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// 搜索的关键词
|
|
const value = defineModel<string>('value', { required: true });
|
|
/**
|
|
* @description 搜索方法
|
|
*/
|
|
const searchMethod = defineModel<any>('search', {
|
|
type: Function
|
|
});
|
|
|
|
const placeholder = defineModel('placeholder', {
|
|
type: String,
|
|
default: '请输入搜索关键词'
|
|
});
|
|
|
|
const emit = defineEmits(['search']);
|
|
|
|
function handleSearchActino() {
|
|
emit('search');
|
|
searchMethod.value && searchMethod.value();
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.search-container {
|
|
:deep(.van-search) {
|
|
padding: 0;
|
|
//margin: 0 10px;
|
|
border-radius: 0;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.search {
|
|
margin: 0 10px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-self: center;
|
|
align-items: center;
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
color: var(--primary-color);
|
|
&::after {
|
|
content: '|';
|
|
position: absolute;
|
|
right: 11vh;
|
|
top: 1vh;
|
|
//transform: translateY(-50%);
|
|
font-weight: bold;
|
|
color: #E7DEDF; // 竖线颜色与搜索文字一致
|
|
pointer-events: none; // 确保不影响点击事件
|
|
}
|
|
}
|
|
|
|
:deep(.van-search__content){
|
|
background-color: #fff;
|
|
}
|
|
|
|
border-radius: 18px;
|
|
border: solid 1px var(--primary-color);
|
|
background-color: #fff;
|
|
|
|
//width: 100vw;
|
|
display: grid;
|
|
grid-template-columns: 1fr 60px;
|
|
//padding: 0 10px;
|
|
margin: 0 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
</style>
|