cyzh-SoundOfMusic-H5/components/basic/search-bar.vue

<template>
	<view>
		<!--disabled为false时 可以在搜索框输入内容 使用 @onSearch :disabled="false"-->
		<!--disabled为true时 默认为true 则是跳转到新页面进行搜索 使用 @onNavigator -->
		<view class="cu-bar bg-white search" @click="navNewPage">
			<view class="search-form radius">
				<text class="cuIcon-search"></text>
				<input v-model="textValue" :adjust-position="false" :disabled="disabled" :placeholder="placeholder"></input>
			</view>
			<view class="action" @click="searchItem(textValue)">
				<text>搜索</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			disabled: {
				type: Boolean,
				default: true,
			},
			placeholder: {
				type: String,
				default: '请输入参赛选手名字'
			}
		},
		data() {
			return {
				textValue:'',
			}
		},
		methods:{
			navNewPage() {
				this.$emit('onNavigator');
			},
			searchItem(value) {
				this.$emit('onSearch',value);
			},
		}
	}
</script>

<style>

</style>