You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
1.7 KiB
77 lines
1.7 KiB
<template>
|
|
<view class="search-box">
|
|
<view class="saerch-icon">
|
|
<icon type="search" size="13" />
|
|
</view>
|
|
<input class="search" type="text" :placeholder="placeholder" onInput="onBindInput" onConfirm="onBindInputConfirm" :value="value" />
|
|
<view class="saerch-icon" v-if="value" onTap="clickClear">
|
|
<icon type="clear" size="11" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
value: ''
|
|
};
|
|
},
|
|
mixins: [],
|
|
props: {
|
|
placeholder: '请输入',
|
|
onBindInput: () => {},
|
|
onBindInputConfirm: () => {}
|
|
},
|
|
didMount() {},
|
|
didUpdate() {},
|
|
didUnmount() {},
|
|
methods: {
|
|
onBindInputFun(e) {
|
|
this.setData({
|
|
value: e.detail.value
|
|
});
|
|
this.props.onBindInput(e.detail.value);
|
|
},
|
|
clickClear() {
|
|
this.setData({
|
|
value: ''
|
|
});
|
|
this.props.onBindInput(this.value);
|
|
},
|
|
onBindInputConfirmFun() {
|
|
this.props.onBindInputConfirm(this.value);
|
|
}
|
|
},
|
|
created: function () {}
|
|
};
|
|
</script>
|
|
<style>
|
|
.search-box {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 64rpx;
|
|
border-radius: 106rpx;
|
|
background-color: rgba(247, 247, 249, 100);
|
|
margin: 0 40rpx;
|
|
}
|
|
.search {
|
|
flex: 1;
|
|
background-color: transparent;
|
|
/* text-align: center; */
|
|
font-size: 28rpx;
|
|
padding: 0 20px 0 0;
|
|
}
|
|
.saerch-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 20rpx;
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
.saerch-icon:last-child {
|
|
margin-right: 20rpx;
|
|
}
|
|
</style>
|
|
|