搜索栏 SearchBar

搜索组件的搜索栏。

基础用法

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

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

示例代码

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

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

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

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

示例代码

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

设置地址

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

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

是否显示取消文字

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

示例代码

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

设置插槽内容

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

示例代码

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

搜索栏属性（Search Attributes）

搜索栏事件 (Search Events）

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