<template>
|
<view class="widget_style" >
|
<view class="ffff" style="display: flex;height: 100%;">
|
<input placeholder-class="widget_input_placehold" @confirm="onClickSearch" v-model="content" class="widget_input" :style="style1" :placeholder="placehold" />
|
<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:'',
|
style1:'',
|
style2:'',
|
}
|
},
|
props:{
|
width:{
|
type:Number,
|
default:50
|
},
|
placehold:{
|
type:String,
|
default:'请输入内容'
|
},
|
buttonText:{
|
type:String,
|
default(){
|
return '搜索'
|
}
|
},isSearchTrue:{
|
type:Boolean,
|
default(){
|
return true
|
}
|
},
|
},
|
created() {
|
// 编织设置动态宽度
|
// this.style1 = 'min-width:calc('+this.width+'vw);';
|
// this.style2 = 'min-width:calc('+(this.width / 5)+'vw);';
|
this.style1= 'width:4.5rem'
|
this.style2= 'width:.5rem'
|
},
|
destroyed() {
|
|
},
|
methods:{
|
onClickSearch(){
|
this.$emit('onSearch',{text:this.content});
|
}
|
}
|
}
|
</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: .74rem;
|
height: .3rem;
|
font-size: .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;
|
}
|
.searchBg{
|
width: .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: .16rem;
|
}
|
</style>
|
