175 lines
3.1 KiB
Vue
175 lines
3.1 KiB
Vue
<template>
|
|
<view class="search">
|
|
<image class="back" src="/static/images/back.png" mode="aspectFill" @click="goBack" v-if="showBack"></image>
|
|
<view class="search-right" :style="{ 'width': width,'height':height,'border':border}">
|
|
<input type="text" class="search-inp" :placeholder="placeholder" :value="value" @input="onInput"
|
|
@confirm="onConfirm" confirm-type="search" placeholder-style="color: #999999;" />
|
|
<image class="search-icon" src="/static/images/search.png" @click.stop="onSearch"></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'search-box',
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '请输入搜索内容'
|
|
},
|
|
showBack: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
width: {
|
|
type: String,
|
|
},
|
|
height: {
|
|
type: String,
|
|
},
|
|
border: {
|
|
type: String,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
statusBarHeight: 0
|
|
}
|
|
},
|
|
computed: {
|
|
searchStyle() {
|
|
// #ifdef APP-PLUS || H5
|
|
return {
|
|
|
|
}
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
return {
|
|
|
|
}
|
|
// #endif
|
|
}
|
|
},
|
|
created() {
|
|
// #ifdef APP-PLUS || H5
|
|
// 获取状态栏高度
|
|
const systemInfo = uni.getSystemInfoSync()
|
|
this.statusBarHeight = systemInfo.statusBarHeight
|
|
// #endif
|
|
},
|
|
methods: {
|
|
goBack() {
|
|
// #ifdef APP-PLUS
|
|
uni.navigateBack()
|
|
// #endif
|
|
|
|
// #ifdef MP-WEIXIN || H5
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
// #endif
|
|
},
|
|
onSearch(e) {
|
|
// App阻止冒泡
|
|
// #ifdef APP-NVUE
|
|
e.stopPropagation()
|
|
// #endif
|
|
this.$emit('search')
|
|
},
|
|
onInput(e) {
|
|
// #ifdef APP-PLUS || H5
|
|
this.$emit('input', e.detail.value || e.target.value)
|
|
// #endif
|
|
|
|
// #ifdef MP-WEIXIN
|
|
this.$emit('input', e.detail.value)
|
|
// #endif
|
|
},
|
|
onConfirm(e) {
|
|
// #ifdef APP-PLUS || H5
|
|
this.$emit('confirm', e.detail.value || e.target.value)
|
|
// #endif
|
|
|
|
// #ifdef MP-WEIXIN
|
|
this.$emit('confirm', e.detail.value)
|
|
// #endif
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.search {
|
|
padding: 20rpx 24rpx;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.back {
|
|
width: 16rpx;
|
|
height: 32rpx;
|
|
/* #ifdef H5 */
|
|
cursor: pointer;
|
|
/* #endif */
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.search-right {
|
|
width: 660rpx;
|
|
height: 64rpx;
|
|
background-color: #fff;
|
|
border-radius: 32rpx;
|
|
position: relative;
|
|
/* #ifdef H5 */
|
|
display: flex;
|
|
align-items: center;
|
|
/* #endif */
|
|
}
|
|
|
|
.search-inp {
|
|
flex: 1;
|
|
height: 64rpx;
|
|
height: 64rpx;
|
|
font-size: 24rpx;
|
|
color: #000000;
|
|
border-width: 0;
|
|
padding: 0 70rpx 0 48rpx;
|
|
/* #ifdef H5 */
|
|
outline: none;
|
|
background-color: transparent;
|
|
/* #endif */
|
|
}
|
|
|
|
.search-icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
position: absolute;
|
|
right: 40rpx;
|
|
top: 16rpx;
|
|
/* #ifdef H5 */
|
|
cursor: pointer;
|
|
/* #endif */
|
|
}
|
|
|
|
/* #ifdef H5 */
|
|
.search-inp::-webkit-input-placeholder {
|
|
color: #999999;
|
|
}
|
|
|
|
.search-inp::-moz-placeholder {
|
|
color: #999999;
|
|
}
|
|
|
|
.search-inp:-ms-input-placeholder {
|
|
color: #999999;
|
|
}
|
|
|
|
/* #endif */
|
|
</style> |