uniapp中uview组件库的Search 搜索 的用法

2023-12-29 09:50:58

目录

基本使用

#设置输入框形状

#是否开启清除控件

#是否开启右边控件

#自定义样式

API

#Props

#Events


基本使用

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

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

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

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

#设置输入框形状

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

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

copy

#是否开启清除控件

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

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

#是否开启右边控件

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

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

说明

  1. 如果不想点击右侧控件时自动消失,请把animation设置为false
  2. 右侧控件的默认文字为"搜索"(它本意为控件,碰巧内容为"搜索"二字,并非说它就是一个搜索按钮),点击它的时候触发的是custom事件,而不是search事件
<u-search :showAction="true" actionText="搜索" :animation="true"></u-search>

#自定义样式

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

API

#Props

参数说明类型默认值可选值
v-model双向绑定输入框搜索值String--
shape搜索框形状,round-圆形,square-方形Stringroundsquare
bgColor搜索框背景颜色String#f2f2f2-
placeholder占位文字内容String请输入关键字-
clearabled是否启用清除控件Booleantruefalse
focus是否自动获得焦点Booleanfalsetrue
showAction是否显示右侧控件(右侧的"搜索"按钮)Booleantruefalse
actionStyle右侧控件的样式,对象形式Object--
actionText右侧控件文字String搜索-
inputAlign输入框内容水平对齐方式Stringleftcenter / right
inputStyle自定义输入框样式,对象形式Object--
disabled是否启用输入框Booleanfalsetrue
borderColor边框颜色,配置了颜色,才会有边框Stringtransparent-
searchIconColor搜索图标的颜色,默认同输入框字体颜色String#909399-
searchIconSize搜索图标的大小Number22-
color输入框字体颜色String#606266-
placeholderColorplaceholder的颜色String#909399-
searchIcon输入框左边的图标,可以为uView图标名称或图片路径Stringsearch-
margin组件与其他上下左右元素之间的距离,带单位的字符串形式,如"30rpx"、"30rpx 20rpx"等写法String0-
animation是否开启动画,见上方说明Booleanfalsetrue
value输入框初始值String--
maxlength输入框最大能输入的长度,-1为不限制长度String | Number-1-
height输入框高度,单位rpxString | Number64-
label搜索左侧文本信息String | Number--

#Events

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

事件名说明回调参数版本
change输入框内容发生变化时触发value:输入框的值-
search用户确定搜索时触发,用户按回车键,或者手机键盘右下角的"搜索"键时触发value:输入框的值-
custom用户点击右侧控件时触发value:输入框的值-
blur输入框失去焦点时触发value:输入框的值-
focus输入框获得焦点时触发value:输入框的值-
clear配置了clearabled后,清空内容时会发出此事件--
clickdisabledtrue时,点击输入框,发出此事件,用于跳转搜索页--
clickIcon左侧icon点击时候时触发--

文章来源:https://blog.csdn.net/m0_72603435/article/details/135282219
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。