输入框模糊搜索

github地址,喜欢的可以star下哦

插件预览图

使用教程

1.插件代码拷贝

  • 下载后把components目录下inputSearch.vue文件拷贝到自己项目目录下

2.插件全局配置

import inputSearch from './components/inputSearch.vue'

Vue.component('inputSearch', inputSearch)

3.插件使用

<template>
    <view class="content">
        <inputSearch :dataSource="dataSource" @select="handleChange" placeholder="请输入商品名称" />
    </view>
</template>

<script>
    export default {
        data() {
            return {
                dataSource: [{
                        id: 1,
                        name: '耐克1'
                    },
                    {
                        id: 2,
                        name: '耐克2'
                    }
                ],
            };
        },
        methods: {
            //用户点击获取的数据
            handleChange(data) {
                console.log(data)
            }
        }
    }
</script>

<style lang="scss">
    .content {
        padding:20upx;
    }
</style>
兼容性

uni-app项目中使用都兼容

样式可以自己在组件里面调整
[![](https://img.javascriptcn.com/c1f50b6dfc758218e3ac0b5e868dba54) ](/u/potato1314)

关注作者

推荐阅读
![Planets](https://img.javascriptcn.com/dca42f4e1c90d761fa6df74ca865f9fc.png)
原文链接:segmentfault.com

上一篇:vue2-elm学习记录(Day8)
下一篇:Vue中使用watch监听对象/数组导致的新旧值相同

相关推荐

官方社区

扫码加入 JavaScript 社区