平台兼容性

组件说明

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

使用须知

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

组件示例

属性说明

调用说明

 <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>

 <script>
 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;
        }
    }
 };
 </script>

更新日志

v1.1.0

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

v1.0.0

• init