小程序开发框架

# 介绍

用于搜索场景的输入框组件。

# 引入

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
  "mx-search": "/miniprogram_npm/m-ui/mx-search/index",
}

# 小程序码

可使用微信扫码查看小程序码

#

# 代码演示

# 基本用法

mx-search 中，value 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。

<mx-search value="{{ value }}" placeholder="请输入搜索关键词" />

# 事件监听

mx-search 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的搜索按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发。

<mx-search
  value="{{ value }}"
  placeholder="请输入搜索关键词"
  show-action
  bind:search="onSearch"
  bind:cancel="onCancel"
/>

# 禁用搜索框

通过 disabled 属性可以将组件设置为禁用状态。

<mx-search disabled value="{{ value }}" placeholder="请输入搜索关键词" />

# 自定义按钮

mx-search 支持自定义右侧取消按钮，使用名字为 action 的 slot，并设置 use-action-slot 为 true 即可。

<mx-search
  value="{{ value }}"
  label="地址"
  placeholder="请输入搜索关键词"
  use-action-slot
  bind:change="onChange"
  bind:search="onSearch"
>
  <view slot="action" bind:tap="onClick">搜索</view>
</mx-search>

Page({
  data: {
    value: '',
  },
  onChange(e) {
    this.setData({
      value: e.detail,
    });
  },
  onSearch() {
    console.log('搜索' + this.data.value);
  },
  onClick() {
    console.log('搜索' + this.data.value);
  },
});

# API

# Props

参数 说明 类型 默认值
name 在表单内提交时的标识符 string -
label 搜索框左侧文本 string -
value 当前输入的值 string 、 number -
type 搜索框类型，可选值simple-默认,medium-浅色,complex-深色 string -
background 搜索框背景色 string #ffffff
field-color 搜索框元素的颜色 string -
content-color 搜索框框底的颜色 string #f6f6f6
show-action 是否在搜索框右侧显示取消按钮 boolean false
action-text 取消按钮文字 string 取消
focus 获取焦点 boolean false
error 是否将输入内容标红 boolean false
disabled 是否禁用输入框 boolean false
readonly 是否只读 boolean false
clearable 是否启用清除控件 boolean false
clear-trigger 显示清除图标的时机，always 表示输入框不为空时展示,focus 表示输入框聚焦且不为空时展示 string focus
clear-icon 清除图标 string clear
maxlength 最大输入长度，设置为 -1 的时候不限制最大长度 number -1
use-action-slot 是否使用 action slot boolean false
placeholder 输入框为空时占位符 string -
placeholder-style 指定占位符的样式 string -
use-left-icon-slot 是否使用输入框左侧图标 slot boolean false
use-right-icon-slot 是否使用输入框右侧图标 slot boolean false
left-icon 输入框左侧图片链接（如果设置了 use-left-icon-slot，则该属性无效） string search
right-icon 输入框右侧图片链接,（如果设置了 use-right-icon-slot，则该属性无效） string -

# Events

事件名 说明 参数
bind:search 确定搜索时触发 event.detail: 当前输入值
bind:change 输入内容变化时触发 event.detail: 当前输入值
bind:cancel 取消搜索搜索时触发 -
bind:focus 输入框聚焦时触发 -
bind:blur 输入框失焦时触发 -
bind:clear 点击清空控件时触发 -
bind:click-input 点击搜索区域时触发 -

# Slot

名称 说明
action 自定义搜索框右侧按钮，需要在use-action-slot为 true 时才会显示
label 自定义搜索框左侧文本
left-icon 自定义输入框左侧图标，需要在use-left-icon-slot为 true 时才会显示
right-icon 自定义输入框右侧图标，需要在use-right-icon-slot为 true 时才会显示

# 外部样式类

名称 说明
custom-class 根节点样式类
field-class 搜索框样式类
custom-class 根节点样式类
input-class 输入框样式类
cancel-class 取消按钮样式类

← 输入框（field） →