更新记录

1.3.0(2023-04-27) 下载此版本

功能增加:支持拼音搜索

1.2.0(2023-04-25) 下载此版本

props增加placeholder(搜索文字提示),可动态修改

1.1.2(2023-04-25) 下载此版本

keywords补充

查看更多

平台兼容性

wft-addressbook

通讯录插件 包含索引指示、跳转;根据名称过滤搜索等 自定义头像等。可扩展性更高

Installation

使用DCLOUD导入使用即可

Usage

<wft-addressbook
    :datas="userList"
    :nameKey="'name'"
    :mobileKey="'mobile'"
    :index="true"
    :isSurname="false"
    :photoColor="'#f44336'"
    :photoKey="'photo'"
    :serverUrl="`http://${ip}:${port}`"
    :defaultPhoto="require('@/static/user/default-avatar.png')"
    :positionTop="'50px'"
    :positionBottom="'100upx'"
    :placeholder="'搜索联系人'"
    @rowClick="rowClick"
/>

参数说明

props: {
    // 数据列表
    datas: {
        type: Array,
        default: () => []
    },
    // 显示的姓名key
    nameKey: {
        type: String,
        default: 'name'
    },
    // 联系方式key
    mobileKey: {
        type: String,
        default: 'mobile'
    },
    // 是否显示右侧索引
    index: {
        type: Boolean,
        default: true
    },
    // 是否以姓为头像
    isSurname: {
        type: Boolean,
        default: true
    },
    // 以姓为头像时的背景色, isSurname为true时生效
    photoColor: {
        type:String,
        default:"#f44336"
    },
    // 头像字段key, isSurname为false时生效
    photoKey: {
        type: String,
        default: 'photo'
    },
    // 后台服务地址, 用于显示服务返回的地址头像, 一般是服务地址拼上返回的路径 也就是 serverUrl + photoKey, 按自己需求灵活修改, isSurname为false时生效
    serverUrl: {
        type: String,
        default: ''
    },
    // 默认头像路径, 可以放在static下, isSurname为false时且字段photoKey没有值时生效
    defaultPhoto: {
        type: String,
        default: ''
    },
    // 通讯录距顶部的距离
    positionTop: {
        type: [Number, String],
        default: 0
    },
    // 通讯录距底部的距离
    positionBottom: {
        type: [Number, String],
        default: '25upx'
    },
    // 搜索框提示placeholder
    placeholder: {
        type: String,
        default: '搜索联系人'
    }
}

// 事件触发
methods: {
    // 点击某行触发
    rowClick(item) {
        console.log(item)
    }
}

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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