更新记录
1.0(2024-08-29) 下载此版本
用户将姓名转化为头像 支持中文、英文 例子: Pike Zhang 显示效果:PZ 张智 显示效果:张
平台兼容性
HbuilderX/cli最低兼容版本 |
---|
3.92 |
uni-app
Vue2 | Vue3 |
---|---|
√ | ? |
app-vue | app-nvue | app-android | app-ios | app-harmony |
---|---|---|---|---|
? | ? | ? | ? | ? |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | 钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
快应用-华为 | 快应用-联盟 |
---|---|
? | ? |
uni-app x
app-android | app-ios |
---|---|
? | ? |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
姓名转化为头像
用户将姓名转化为头像 支持中文、英文 例子: Pike Chen 显示效果:PC 陈智 显示效果:陈
使用方式:
在 script
中引用组件
import fullnameavatar from "@/components/fullname-avatar/fullname-avatar.vue"
export default {
components: {fullnameavatar},
data() {
return {
name:'Pike Chen'
}
},
}
在 template
中使用组件
<fullnameavatar :username="name" :parser="parser" :inline="true" />
fullnameavatar 属性说明:
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
username | String | - | 图标图案,参考下表 |
initials | String | - | 首字母,r如果传值以此为准 |
backgroundColor | String | - | 背景颜色 |
color | String | - | 字体颜色 |
customStyle | Object | - | 当前行内样式 |
inline | Boolean | false | 是否座位内联元素显示 |
size | Number | 50 | 大小,影响显示的宽度高度等 |
src | String | - | 图片url,如果有值以此为准,不会生成姓名头像 |
rounded | Boolean | true | 是否显示圆的 |
lighten | Number | 80 | 字体亮度 |
backgroundColor 实现刷新变色:
在 template
中使用组件
<fullnameavatar :username="name" :parser="parser" :background-color="extractColorByName(name)" color="#fff" :inline="true" />
在 script
中引用组件,跟上面一致
import fullnameavatar from "@/components/fullname-avatar/fullname-avatar.vue"
export default {
components: {fullnameavatar},
data() {
return {
name:'Pike Chen'
}
},
methods: {
extractColorByName(name,bgcolor) {
var colors = [
"#31bc9f", "#33cc70", "#4a94db", "#9b5fb6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50",
"#f1cb1e", "#e6761b", "#e7363b", "#00bcd4", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"
];
var avatarColor = bgcolor==null?colors[Math.floor((Math.random()*colors.length))]:bgcolor==""?bgcolor:colors[Math.floor((Math.random()*colors.length))];
return avatarColor;
}
}
}