更新记录

1.0.2(2022-12-02)

1、支持模糊搜索value、label 2、失去焦点关闭联想推荐

1.0.1(2021-06-24)

修复文件引入错误问题

1.0.0(2020-12-01)

1.0.0 完成基础测试,如有好的建议可以评论区留言给我

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
× × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

属性说明

属性名 类型 默认值 说明
ifcircle Boolean true 搜索框是否是圆角边框
ifshowadvice Boolean true 是否打开输入建议
placeholervalue String 请输入搜索内容 输入框的占位符
adviceList Array [] 搜索建议数据列表
value String '' 输入框的值

事件说明

事件名 说明
input input输入值
blur blur
focus 获取输入框焦点 并传递搜索联系数据
clear 清除输入框的值
getadvice 点击得到搜索建议的对应数据

示例

<search @focus="showAdvice" @getadvice="getAdvice" @input="getSearchValue" @clear="clearValue" :adviceList="arry" :ifshowadvice="true" :value="searchValue"></search>
import search from '@/components/pretty-search/pretty-search.vue'
    export default {
            components: {
                search
            },
            data() {
                return {
                    arry:[],
                    searchValue:'hello'
                }
            },
            onLoad() {

            },
            methods: {
                showAdvice(e) {
                    this.arry = [{
                        name:'冰冻鱼骨',
                        id:1
                    },{
                        name:'香辣鸡翅',
                        id:2
                    },{
                        name:'芝士排骨',
                        id:3
                    },{
                        name:'冰冻鱼骨',
                        id:4
                    },{
                        name:'香辣鸡翅',
                        id:5
                    },{
                        name:'芝士排骨',
                        id:6
                    }]
                },
                /**
                 * @param {Object} e 点击搜索建议返回的值,可以自定义修改为返回具体id
                 */
                getAdvice(e) {
                    console.log(e)
                },
                getSearchValue(e) {
                    this.searchValue = e
                },
                /**
                 * @description 点击清除操作需要置空value绑定的值
                 */
                clearValue() {
                    this.searchValue = ''
                }
            }
        }

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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