MiniX自绘渲染跨平台框架

# SearchBar 搜索栏

请扫码查看示例

# 介绍

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

# 引入

通过以下方式来引入组件

  1. 使用包管理器安装mui-minix 组件库。如： npm i mui-minix -S;
  2. 在要使用该组件的页面中使用element标签引入该组件。

# 代码演示

# 基本用法

<element name="m-search-bar" src="@/node_modules/mui-minix/src/search-bar/index"></element>
<m-search-bar value="{{text}}" placeholder="基础用法" @m-change="onChange"></m-search-bar>
1
2
export default {
  data(){
    return {
      text:''
    }
  },
  onChange(e){
    this.text = e.detail
  }
}
1
2
3
4
5
6
7
8
9
10

# 圆角

通过设置 round 属性，可以控制输入框是否圆角。

<element name="m-search-bar" src="@/node_modules/mui-minix/src/search-bar/index"></element>
<m-search-bar value="{{text}}" round="{{true}}" placeholder="圆角" @m-change="onChange"></m-search-bar>
1
2
export default {
  data(){
    return {
      text:''
    }
  },
  onChange(e){
    this.text = e.detail
  }
}
1
2
3
4
5
6
7
8
9
10

# 背景颜色

通过设置 background-color 可以控制背景色。通过设置 input-background-color 可以控制输入框的背景颜色。

<element name="m-search-bar" src="@/node_modules/mui-minix/src/search-bar/index"></element>
<m-search-bar value="{{text}}" background-color="#eeeeee" input-background-color="#ffffff" placeholder="自定义背景颜色" @m-change="onChange"></m-search-bar>
1
2
export default {
  data(){
    return {
      text:''
    }
  },
  onChange(e){
    this.text = e.detail
  }
}
1
2
3
4
5
6
7
8
9
10

# Api

# Prop

字段 说明 类型 默认值 是否必须
value 搜索框输入文本 string - 是
round 是否圆角 boolean false 否
padding-left 左侧留白 number 16 否
padding-right 右侧留白 number 16 否
padding-top 上侧留白 number 16 否
padding-bottom 下侧留白 number 16 否
background-color 背景颜色 string #ffffff 否
input-height 输入框高度 number 36 否
input-padding-left 输入框左侧留白 number 10 否
input-padidng-right 输入框右侧留白 number 10 否
input-background-color 输入框背景颜色 string #f6f6f6 否
input-top-left-border-radius 输入框左上圆角半径 number 4 否
input-top-right-border-radius 输入框右上圆角半径 number 4 否
input-bottom-left-border-radius 输入框左下圆角半径 number 4 否
input-bottom-right-border-radius 输入框右下圆角半径 number 4 否
input-color 输入框文本颜色 string #000000 否
input-font-size 输入框字体大小 number 14 否
placeholder 提示文本 string - 否
placeholder-color 提示文本颜色 string #8A8A8F 否

# Events

名称 说明 回调参数
m-change 输入框文本变化时触发 value: string