手机网站建设软件,怎样网络营销推广,公司个人怎么制作网站,百度一下你就知道网页目录 基本使用
#设置输入框形状
#是否开启清除控件
#是否开启右边控件
#自定义样式
API
#Props
#Events 基本使用
通过placeholder参数设置占位内容通过v-model双向绑定一个变量值#xff0c;设置初始化时搜索框的值#xff0c;如果初始内容为空#xff0c;那么请绑…
目录 基本使用
#设置输入框形状
#是否开启清除控件
#是否开启右边控件
#自定义样式
API
#Props
#Events 基本使用
通过placeholder参数设置占位内容通过v-model双向绑定一个变量值设置初始化时搜索框的值如果初始内容为空那么请绑定一个值为空字符的变量。
说明 因为是双向绑定的所以当组件内容输入框内容变化时也会实时的反映到绑定的keyword变量这意味着您无需监听change事件 也能实时的得知输入框的内容。
templateu-search placeholder日照香炉生紫烟 v-modelkeyword/u-search
/templatescriptexport default {data() {return {keyword: 遥看瀑布挂前川}}}
/script#设置输入框形状
通过shape设置输入框两端的形状square-方形带圆角round(默认)-半圆形
u-search shaperound/u-searchcopy
#是否开启清除控件
clearabled(默认为true)设置为true的话输入框有内容时右边会显示一个清除的图标
u-search :clearabledtrue/u-search#是否开启右边控件
该控件为类似按钮形式可以设置为搜索或者取消等内容如果开启动画效果用户确认搜索后该控件会自动消失
showAction配置是否开启右边按钮控件actionText配置控件内容animation(默认为false)设置为true的话失去焦点或者点击控件按钮时控件自动消失并且带有动画效果
说明
如果不想点击右侧控件时自动消失请把animation设置为false右侧控件的默认文字为搜索(它本意为控件碰巧内容为搜索二字并非说它就是一个搜索按钮)点击它的时候触发的是custom事件而不是search事件
u-search :showActiontrue actionText搜索 :animationtrue/u-search#自定义样式
通过inputAlign设置输入框内容的对其方式和css的text-align同理通过borderColor设置整个搜索组件的边框只要配置了颜色才会出现边框通过height设置组件高度通过disabled设置是否禁用输入框通过bgColor设置是搜索组件背景颜色
u-search inputAligncenter height70/u-search
API
#Props
参数说明类型默认值可选值v-model双向绑定输入框搜索值String--shape搜索框形状round-圆形square-方形StringroundsquarebgColor搜索框背景颜色String#f2f2f2-placeholder占位文字内容String请输入关键字-clearabled是否启用清除控件Booleantruefalsefocus是否自动获得焦点BooleanfalsetrueshowAction是否显示右侧控件(右侧的搜索按钮)BooleantruefalseactionStyle右侧控件的样式对象形式Object--actionText右侧控件文字String搜索-inputAlign输入框内容水平对齐方式Stringleftcenter / rightinputStyle自定义输入框样式对象形式Object--disabled是否启用输入框BooleanfalsetrueborderColor边框颜色配置了颜色才会有边框Stringtransparent-searchIconColor搜索图标的颜色默认同输入框字体颜色String#909399-searchIconSize搜索图标的大小Number22-color输入框字体颜色String#606266-placeholderColorplaceholder的颜色String#909399-searchIcon输入框左边的图标可以为uView图标名称或图片路径Stringsearch-margin组件与其他上下左右元素之间的距离带单位的字符串形式如30rpx、30rpx 20rpx等写法String0-animation是否开启动画见上方说明Booleanfalsetruevalue输入框初始值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后清空内容时会发出此事件--clickdisabled为true时点击输入框发出此事件用于跳转搜索页--clickIcon左侧icon点击时候时触发--
