# Search 搜索

搜索组件，集成了常见搜索框所需功能，用户可以一键引入，开箱即用。

# 平台差异说明

# 基本使用

• 通过placeholder参数设置占位内容
• 通过v-model双向绑定一个变量值，设置初始化时搜索框的值，如果初始内容为空，那么请绑定一个值为空字符的变量。

说明： 因为是双向绑定的，所以当组件内容输入框内容变化时，也会实时的反映到绑定的keyword变量，这意味着，您无需监听change事件， 也能实时的得知输入框的内容。

<template>
	<up-search placeholder="日照香炉生紫烟" v-model="keyword"></up-search>
</template>

<script setup>  
import { ref } from 'vue';  
  
// 响应式数据  
const keyword = ref('遥看瀑布挂前川');  
</script> 

<script>
	export default {
		data() {
			return {
				keyword: '遥看瀑布挂前川'
			}
		}
	}
</script>

# 设置输入框形状

通过shape设置输入框两端的形状，square-方形带圆角，round(默认)-半圆形

<up-search shape="round"></up-search>

# 是否开启清除控件

clearabled(默认为true)设置为true的话，输入框有内容时，右边会显示一个清除的图标

<up-search :clearabled="true"></up-search>

# 是否开启右边控件

该控件为类似按钮形式，可以设置为"搜索"或者"取消"等内容，如果开启动画效果，用户确认搜索后，该控件会自动消失

• showAction配置是否开启右边按钮控件
• actionText配置控件内容
• animation(默认为false)设置为true的话，失去焦点，或者点击控件按钮时，控件自动消失，并且带有动画效果

<up-search :show-action="true" actionText="搜索" :animation="true"></up-search>

# 自定义样式

• 通过inputAlign设置输入框内容的对其方式，和css的text-align同理
• 通过borderColor设置整个搜索组件的边框，只要配置了颜色，才会出现边框
• 通过height设置组件高度
• 通过disabled设置是否禁用输入框
• 通过bgColor设置是搜索组件背景颜色

<up-search inputAlign="center" height="70"></up-search>

# 右侧演示页面源代码地址

点击以下链接以查看右侧演示页面的源码

 github  gitee

# API

# Props

# Events

您可以通过监听change事件，在回调中将返回的结果绑定一个变量去获得用户的输入内容。
但如"基本使用"中的说明一样，您双向绑定了一个变量后，无需监听change事件也是可以的。