组件说明

在开发移动端应用的时候,会有很多使用搜索组件的时候。但有时候要实现一些动画效果的时候,有一些开发者就会有些束手无策的感觉。于是我提供几种常见的搜索框的例子。 只是提供基础内容,与动画效果,其他功能可自行扩充。

使用须知

  1. 样式依赖 sass ,所以需要现在工具安装 sass 插件。
  2. 依赖工程下的 uni.sass ,如样式有问题,查看工程下是否存在。
  3. ios 中软键盘不会自动收起,所以需要手动点击完成收起软键盘。

组件示例

Jan-04-2019 17-40-53.gif

属性说明

属性名 类型 默认值 说明
mode number 1 对齐方式 ,可选值: 1 [默认]文字左对齐 ,2 文字居中对齐
button string outside 按钮位置,可选值: 'outside' [默认]按钮在搜索框外 'inside' 按钮在搜索框内
show boolean true 按钮显示规则 ,可选值: true [默认]如果mode为1 ,则为始终显示按钮,mode为2,则获取焦点显示按钮。 false 如果mode为1 ,则为获取焦点显示按钮,mode为2,则为输入时显示按钮
placeholder string 请输入搜索内容 占位提示 ,最多7个字符 ,否者可能会显示不全
backgroundColor string #fff 背景色
border string 1px #f5f5f5 solid 输入框线条样式
search function - 点击搜索按钮,返回输入框内输入的值

调用说明


 <template>
    <view class="content">
        1.文字左对齐 外部显示搜索按钮并且始终显示
        <mSearch @search="search($event,0)"></mSearch>
        搜索的值:{{val0}}
        <br/>
        2.文字左对齐 外部显示搜索按钮并且获取焦点时显示
        <mSearch :show="false" @search="search($event,1)"></mSearch>
        搜索的值:{{val1}}

        <br/>
        3.文字居中对齐 内部显示搜索按钮并且获取焦点时显示
        <mSearch :mode="2" button="inside" @search="search($event,2)"></mSearch>
        搜索的值:{{val2}}

        <br/>
        4.文字居中对齐 内部显示搜索按钮并且获取输入时显示
        <mSearch :mode="2" button="inside" :show="false" @search="search($event,3)"></mSearch>
        搜索的值:{{val3}}
        <br/>
        5.自定义输入框
        <mSearch :show="false" radius="5" :placeholder="placeholder" backgroundColor="#ff5a5f" border='1px #999 solid'></mSearch>
    </view>
 </template>

 
 import mSearch from '@/components/mehaotian-search/mehaotian-search.vue';
 export default {
    components: {
        mSearch
    },
    data() {
        return {
            val0: '',
            val1: '',
            val2: '',
            val3: '',
            placeholder:'动态占位内容'
        };
    },

    methods: {
        search(e, val) {
            console.log(e, val);
            this['val'+val] = e;
        }
    }
 };
 

更新日志

v1.1.0

  • 修改不能自定义修改 placeholder 的问题
  • 添加自定义背景色
  • 添加自定义输入框边框样式
  • 修改组件内拼写错误
  • 修复app端不显示图标的问题

v1.0.0

  • init

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问