初始化代码

uniapp/uni-app/components/search.vue

@@ -0,0 +1,194 @@
+<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>