145 lines
2.6 KiB
TypeScript
145 lines
2.6 KiB
TypeScript
import { useComponentBoolean } from '../../base/composables/use-component-common-props'
|
|
import { buildProps, definePropType } from '../../../utils'
|
|
import { componentImgModes, componentTypes } from '../../../constants'
|
|
|
|
import type { ExtractPropTypes } from 'vue'
|
|
import type { BadgeProps } from '../../badge'
|
|
import type { IconProps } from '../../icon'
|
|
|
|
/**
|
|
* @description 头像形状
|
|
*/
|
|
export const avatarShape = ['circle', 'square'] as const
|
|
|
|
/**
|
|
* @description 图标参数配置
|
|
*/
|
|
export interface AvatarIconProps {
|
|
/**
|
|
* @description 图标颜色
|
|
*/
|
|
color?: IconProps['color']
|
|
/**
|
|
* @description 图标大小
|
|
*/
|
|
size?: IconProps['size']
|
|
/**
|
|
* @description 图标加粗
|
|
*/
|
|
bold?: IconProps['bold']
|
|
}
|
|
|
|
/**
|
|
* @description 徽标参数属性
|
|
*/
|
|
export type AvatarBadgeProps = Partial<
|
|
Pick<
|
|
BadgeProps,
|
|
| 'max'
|
|
| 'type'
|
|
| 'size'
|
|
| 'bgColor'
|
|
| 'textColor'
|
|
| 'fontSize'
|
|
| 'bold'
|
|
| 'dot'
|
|
| 'absolute'
|
|
| 'absolutePosition'
|
|
| 'absoluteCenter'
|
|
>
|
|
>
|
|
|
|
export const avatarProps = buildProps({
|
|
/**
|
|
* @description 头像地址(url地址和绝对地址)
|
|
*/
|
|
url: String,
|
|
/**
|
|
* @descripttion 头像图标
|
|
*/
|
|
icon: String,
|
|
/**
|
|
* @description 头像图标配置
|
|
*/
|
|
iconConfig: {
|
|
type: definePropType<AvatarIconProps>(Object),
|
|
default: () => ({}),
|
|
},
|
|
/**
|
|
* @description 头像颜色类型
|
|
*/
|
|
type: {
|
|
type: String,
|
|
values: componentTypes,
|
|
default: '',
|
|
},
|
|
/**
|
|
* @description 头像大小
|
|
*/
|
|
size: {
|
|
type: [String, Number],
|
|
},
|
|
/**
|
|
* @description 头像形状
|
|
*/
|
|
shape: {
|
|
type: String,
|
|
values: avatarShape,
|
|
default: 'circle',
|
|
},
|
|
/**
|
|
* @description 头像图片模式
|
|
*/
|
|
imgMode: {
|
|
type: String,
|
|
values: componentImgModes,
|
|
default: 'aspectFill',
|
|
},
|
|
/**
|
|
* @description 背景颜色
|
|
*/
|
|
bgColor: String,
|
|
/**
|
|
* @description 显示边框
|
|
*/
|
|
border: useComponentBoolean,
|
|
/**
|
|
* @description 边框颜色
|
|
*/
|
|
borderColor: String,
|
|
/**
|
|
* @description 是否加粗边框
|
|
*/
|
|
borderBold: useComponentBoolean,
|
|
/**
|
|
* @description 显示阴影
|
|
*/
|
|
shadow: useComponentBoolean,
|
|
/**
|
|
* @description 阴影颜色
|
|
*/
|
|
shadowColor: String,
|
|
/**
|
|
* @description 角标内容
|
|
*/
|
|
badge: {
|
|
type: [String, Number],
|
|
},
|
|
/**
|
|
* @description 角标配置
|
|
*/
|
|
badgeConfig: {
|
|
type: definePropType<AvatarBadgeProps>(Object),
|
|
default: () => ({}),
|
|
},
|
|
})
|
|
export const avatarEmits = {
|
|
/**
|
|
* @description 点击事件
|
|
*/
|
|
click: () => true,
|
|
}
|
|
|
|
export type AvatarProps = ExtractPropTypes<typeof avatarProps>
|
|
export type AvatarEmits = typeof avatarEmits
|