搜索栏 SearchBar

搜索组件的搜索栏。

基础用法

通过placeholder属性设置搜索框占位符。

通过cancel-title属性更改输入框后面的文字内容，默认值为取消。

搜索

示例代码

  1.   <l-search-bar placeholder="搜索"/>

更改搜索框形状及背景颜色

通过shape属性设置搜索框形状。

通过bg-color属性设置搜索框背景颜色。

搜索

示例代码

  1.   <l-search-bar placeholder="搜索"
  2.                 bg-color="#f6f6f6"
  3.                 shape="circle"/>

设置地址

通过address属性设置搜索框前的地址。

搜索

  1.   <l-search-bar placeholder="搜索"
  2.                 bg-color="#f6f6f6"
  3.                 shape="circle"
  4.                 address="北京"/>

是否显示取消文字

通过show-cancel属性设置是否显示取消文字。

搜索

示例代码

  1.   <l-search-bar placeholder="搜索"
  2.                 show-cancel="{{false}}"/>

设置插槽内容

可根据业务场景在插槽插入内容，内容位于搜索框前部。

示例代码

  1.   <l-search-bar placeholder="搜索">
  2.     <!-- 此处是插槽内容 -->
  3.   </l-search-bar>

搜索栏属性（Search Attributes）

参数说明类型可选值默认值
placeholder设置搜索输入框占位符内容String—-—-
cancel-text设置搜索输入框后面的文字String—-取消
show-cancel设置是否显示取消文字Boolean—-true
shape设置搜索框形状Stringcircle/primarycircle
bg-color设置搜索框背景颜色String—-#f3f3f3
address设置搜索框前的地址String—-—-
focus获取焦点Booleantrue/falsefalse
clear是否显示清除按钮Booleantrue/falsefalse
maxlength最大输入长度，设置为 -1 的时候不限制最大长度Number140
placeholder-style设置输入框占位文本的内联样式String

搜索栏事件 (Search Events）

事件名称说明返回值备注
bind:lincancel点击取消文字触发--
bind:linchange键盘输入时触发输入框当前值 value-
bind:linfocus输入框聚焦时触发输入框当前值 value-
bind:linblur输入框失去焦点时触发输入框当前值 value-
bind:linconfirm点击完成按钮时触发输入框当前值 value-

搜索栏外部样式类 (Search ExternalClasses)

外部样式类名说明备注
l-input-container设置输入框容器的样式类—-
l-input-class设置输入框的样式类—-
l-cancel-class设置取消文字的样式类—-
l-placeholder-class设置取消文字的样式类—-