195 lines
3.4 KiB
Vue
195 lines
3.4 KiB
Vue
<template>
|
|
<view class='search-box'
|
|
:style='{padding:`${padding}rpx`,margin:`${margin}rpx`,borderRadius:`${radius}rpx`,background:backgroundColor}'>
|
|
<view class='search-item' :class="[{'flex-y-center': type == 'text'},{'flex-between': type == 'input'}]"
|
|
:style='{borderRadius:`${radius}rpx`,background:searchColor,color:frontColor}'>
|
|
<block v-if="type=='text'">
|
|
<i class="iconfont icon-search"></i>
|
|
<view class='ml-md f-paragraph'>{{placeholder}}</view>
|
|
</block>
|
|
<block v-if="type=='input'">
|
|
<view class="flex-y-center flex-1">
|
|
<i class="iconfont icon-search"></i>
|
|
<input type='text' class="flex-1 f-paragraph ml-md mr-md" :disabled="disabled"
|
|
:placeholder='placeholder'
|
|
:placeholder-class='frontColor === "#fff" ? "c-base" : "c-placeholder"' confirm-type="search"
|
|
@input="handerInput" :value="keyword" @confirm="confirm" :auto-focus="autofocus"></input>
|
|
</view>
|
|
<view class=' search-item-btn flex-center radius' :style="{background:primaryColor}" @tap='confirm'
|
|
v-if="showbtn">搜索
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState,
|
|
} from "vuex"
|
|
export default {
|
|
name: 'search',
|
|
props: {
|
|
type: {
|
|
type: String,
|
|
default () {
|
|
return 'text'
|
|
}
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default () {
|
|
return "请输入关键字进行搜索"
|
|
}
|
|
},
|
|
searchStyle: {
|
|
type: String,
|
|
default () {
|
|
return 'circle'
|
|
}
|
|
},
|
|
textAlign: {
|
|
type: String,
|
|
default () {
|
|
return 'center'
|
|
}
|
|
},
|
|
padding: {
|
|
type: Number,
|
|
default () {
|
|
return 30
|
|
}
|
|
},
|
|
margin: {
|
|
type: Number,
|
|
default () {
|
|
return 0
|
|
}
|
|
},
|
|
radius: {
|
|
type: Number,
|
|
default () {
|
|
return 0
|
|
}
|
|
},
|
|
backgroundColor: {
|
|
type: String,
|
|
default () {
|
|
return '#fff'
|
|
}
|
|
},
|
|
searchColor: {
|
|
type: String,
|
|
default () {
|
|
return '#F6F5FA'
|
|
}
|
|
},
|
|
frontColor: {
|
|
type: String,
|
|
default () {
|
|
return '#888'
|
|
}
|
|
},
|
|
autofocus: {
|
|
type: Boolean,
|
|
default () {
|
|
return false
|
|
}
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default () {
|
|
return false
|
|
}
|
|
},
|
|
showbtn: {
|
|
type: Boolean,
|
|
default () {
|
|
return false
|
|
}
|
|
},
|
|
focus: {
|
|
type: Boolean,
|
|
default () {
|
|
return false
|
|
}
|
|
},
|
|
keyword: {
|
|
type: String,
|
|
default () {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
text: '',
|
|
searchImg: 'https://lbqny.migugu.com/admin/public/search.png'
|
|
}
|
|
},
|
|
computed: mapState({
|
|
primaryColor: state => state.config.configInfo.primaryColor,
|
|
subColor: state => state.config.configInfo.subColor,
|
|
}),
|
|
methods: {
|
|
confirm(e) {
|
|
let val = this.text;
|
|
this.$emit("confirm", val)
|
|
},
|
|
handerInput(e) {
|
|
let val = e.detail.value;
|
|
this.text = val;
|
|
this.$emit("input", val)
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
|
|
<style>
|
|
.search-box {
|
|
padding: 16rpx 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
background: #efeff5;
|
|
}
|
|
|
|
.search-item {
|
|
width: 100%;
|
|
height: 70rpx;
|
|
background: #ffffff;
|
|
border-radius: 30rpx;
|
|
padding: 0 0 0 25rpx;
|
|
line-height: 1;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.search-item-btn {
|
|
width: 110rpx;
|
|
height: 70rpx;
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.search-btn {
|
|
padding: 0 20rpx 0 40rpx;
|
|
}
|
|
|
|
.flex-1 {
|
|
flex: 1;
|
|
}
|
|
|
|
.icon-md {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.ml-md {
|
|
margin-left: 16rpx;
|
|
}
|
|
</style>
|