更新记录

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