zhuoxin-leader-uniapp/components/fxyk-search/fxyk-search.vue

<template>
	<u-search placeholder="输入项目名称或关键字" :bg-color="backgroundColor" :border-color="borderColor" :placeholder-color="placeholderColor" :disabled="disabled" :show-action="false" :input-style="{'padding-left':'20rpx'}" :height="height" :search-icon-color="searchIconColor" v-model="value" :style="padding_show" @click="jump_search"></u-search>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		props: {
			// 搜索框背景颜色
			backgroundColor: {
				type: String,
				default: "#fff"
			},
			// 搜索框边框颜色
			borderColor: {
				type: String,
				default: "black"
			},
			// 提示文字颜色
			placeholderColor: {
				type: String,
				default: "black"
			},
			//输入框高度
			height: {
				type: String,
				default: "64"
			},
			// 是否启用输入框
			disabled: {
				type: Boolean,
				default: false
			},
			// 搜索框图标颜色
			searchIconColor: {
				type: String,
				default: "black"
			},
			// Y轴内边距
			paddingY: {
				type: Number,
				default: 0
			},
			// X轴内边距
			paddingX: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				value: ''
			}
		},
		computed: {
			...mapGetters(['searchItemData']),
			padding_show() {
				return {'padding-top': this.paddingY+'rpx', 
						'padding-bottom': this.paddingY+'rpx',
						'padding-left': this.paddingX+'rpx',
						'padding-right': this.paddingX+'rpx'}
			}
		},
		methods: {
			// 跳到搜索页
			jump_search() {
				uni.navigateTo({url: '/pages/index/search'})
			}
		},
		watch: {
			searchItemData(val) {
				this.value = val
			}
		}
	}
</script>

<style>
</style>