<template>
|
<view class="widget_style">
|
<view class="ffff" style="display: flex; height: 100%; position: relative">
|
<input
|
placeholder-class="widget_input_placehold"
|
@confirm="onClickSearch"
|
v-model="content"
|
class="widget_input"
|
style="min-width: 4rem; padding-right: 54px;box-sizing: border-box;"
|
:placeholder="placehold"
|
/>
|
<span
|
class="cleanupBtn"
|
v-if="content"
|
@click="content = ''"
|
style="
|
position: absolute;
|
top: 50%;
|
margin-top: -10px;
|
right: 84px;
|
color: #fff;
|
z-index: 2;
|
display: inline-block;
|
width: 20px;
|
height: 20px;
|
text-align: center;
|
line-height: 20px;
|
background-color: #a5a5a5;
|
font-weight: bold;
|
border-radius: 50%;
|
font-size: 12px;
|
cursor: pointer;
|
"
|
>✖</span
|
>
|
<view class="widget_button" v-if="isSearchTrue" @click="onClickSearch">{{
|
buttonText
|
}}</view>
|
<view class="widget_button searchBg" v-else @click="onClickSearch"></view>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
export default {
|
data() {
|
return {
|
content: "",
|
style2: ""
|
};
|
},
|
props: {
|
width: {
|
type: Number,
|
default: 50
|
},
|
placehold: {
|
type: String,
|
default: "请输入内容"
|
},
|
keyword: {
|
type: String
|
},
|
buttonText: {
|
type: String,
|
default() {
|
return "搜索";
|
}
|
},
|
isSearchTrue: {
|
type: Boolean,
|
default() {
|
return true;
|
}
|
}
|
},
|
created() {
|
// 编织设置动态宽度
|
// this.style2 = 'min-width:calc('+(this.width / 5)+'vw);';
|
this.style2 = "width:.5rem";
|
this.content = this.keyword || "";
|
},
|
destroyed() {},
|
methods: {
|
onClickSearch() {
|
this.$emit("onSearch", { text: this.content });
|
}
|
},
|
watch: {
|
keyword(value) {
|
this.content = value;
|
}
|
}
|
};
|
</script>
|
|
<style>
|
.widget_style {
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
border-radius: 30px;
|
height: 100% !important;
|
}
|
.ffff {
|
border: 2px solid #597aa5;
|
border-radius: 30px;
|
overflow: hidden;
|
padding-left: 10px;
|
background-color: #fff;
|
align-items: center;
|
}
|
.widget_input {
|
min-width: 320rpx;
|
height: 100%;
|
background-color: #fff;
|
/* border: 2rpx solid #FF6600; */
|
/* border-radius: 10rpx; */
|
padding-left: 12rpx;
|
padding-right: 12rpx;
|
font-size: 24rpx;
|
}
|
.widget_input_placehold {
|
color: #bbb;
|
}
|
.widget_button {
|
color: #fff;
|
width: 0.74rem;
|
height: 0.3rem;
|
font-size: 0.14rem;
|
padding: 5rpx 20rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-top-right-radius: 10rpx;
|
border-top-left-radius: 0rpx;
|
border-bottom-left-radius: 0rpx;
|
border-bottom-right-radius: 10rpx;
|
background-color: #244a7b;
|
border-radius: 30px;
|
margin: 2rpx;
|
cursor: pointer;
|
}
|
.searchBg {
|
width: 0.46rem;
|
height: 0.46rem;
|
background-image: url(@/static/image/搜索.png);
|
background-size: 100% 100%;
|
}
|
::v-deep .uni-input-input {
|
height: 100% !important;
|
color: #000;
|
font-size: 0.16rem;
|
}
|
</style>
|
