amis2/avatar.md at 10fc793f011ef561d0e92a7ded74199dd07df4b0

test/amis2

mirror of https://gitee.com/baidu/amis.git synced 2024-12-01 19:47:56 +08:00

zhangtao07 ff94f7795a feat: 头像占位图片支持

2024-01-10 16:38:45 +08:00

13 KiB

Raw Blame History

title	description	type	group	menuName	icon	order
Avatar 头像		0	⚙ 组件	Avatar 头像		27

用来显示用户头像

基本使用

{
  "type": "avatar",
  "src": "https://suda.cdn.bcebos.com/amis/images/alice-macaw.jpg"
}

文字

{
  "type": "avatar",
  "text": "AM"
}

图标

通过 icon 设置图标

{
  "type": "avatar",
  "icon": "fa fa-user"
}

如果同时存在 src、text 和 icon，会优先用 src、接着 text、最后 icon

动态图片或文字

src、text 都支持变量，可以从上下文中动态获取图片或文字，下面的例子中：

第一个获取到了，显示正常
第二个没获取到，因此降级为显示 icon
第三个图片没获取到，由于 text 优先级比 icon 高，所以显示 text

{
  "data": {
    "myAvatar": "https://suda.cdn.bcebos.com/amis/images/alice-macaw.jpg"
  },
  "type": "page",
  "body": [
    {
      "type": "avatar",
      "icon": "fa fa-user",
      "src": "$myAvatar"
    },
    {
      "type": "avatar",
      "icon": "fa fa-user",
      "src": "$other"
    },
    {
      "type": "avatar",
      "src": "$other",
      "icon": "fa fa-user",
      "text": "avatar"
    }
  ]
}

方形和圆角形

可以通过 shape 改成方形或圆角形

[
  {
    "type": "avatar",
    "shape": "square",
    "text": "AM"
  },
  {
    "type": "avatar",
    "shape": "rounded",
    "text": "AM",
    "style": {
      "marginLeft": "10px"
    }
  }
]

大小

通过 size 可以控制头像的大小

[
  {
    "type": "avatar",
    "size": 'large',
    "icon": "fa fa-user"
  },
  {
    "type": "avatar",
    "size": 'default',
    "icon": "fa fa-user"
  },
  {
    "type": "avatar",
    "size": 'small',
    "icon": "fa fa-user"
  },
  {
    "type": "avatar",
    "size": 60,
    "src": "https://suda.cdn.bcebos.com/amis/images/alice-macaw.jpg"
  },
  {
    "type": "avatar",
    "src": "https://suda.cdn.bcebos.com/amis/images/alice-macaw.jpg"
  },
  {
    "type": "avatar",
    "size": 20,
    "src": "https://suda.cdn.bcebos.com/amis/images/alice-macaw.jpg"
  },
]

控制字符类型距离左右两侧边界单位像素

通过 gap 可以控制字符类型距离左右两侧边界单位像素

[
  {
    "type": "avatar",
    "text": 'ejson',
    "gap": 2
  },
  {
    "type": "avatar",
    "text": "ejson",
    "gap": 7
  }
]

图片拉伸方式

通过 fit 可以控制图片拉伸方式，默认是 'cover'

[
  {
    "type": "avatar",
    "fit": "cover",
    "src": "https://suda.cdn.bcebos.com/images/amis/plumeria.jpeg"
  },
  {
    "type": "avatar",
    "fit": "fill",
    "src": "https://suda.cdn.bcebos.com/images/amis/plumeria.jpeg"
  },
  {
    "type": "avatar",
    "fit": "contain",
    "src": "https://suda.cdn.bcebos.com/images/amis/plumeria.jpeg"
  },
  {
    "type": "avatar",
    "fit": "none",
    "src": "https://suda.cdn.bcebos.com/images/amis/plumeria.jpeg"
  },
    {
    "type": "avatar",
    "fit": "scale-down",
    "src": "https://suda.cdn.bcebos.com/images/amis/plumeria.jpeg"
  }
]

控制图片是否允许拖动

通过 draggable 可以控制图片是否允许拖动

[
  {
    "type": "avatar",
    "fit": "cover",
    "src": "https://suda.cdn.bcebos.com/images/amis/plumeria.jpeg",
    "draggable": false
  },
    {
    "type": "avatar",
    "fit": "cover",
    "src": "https://suda.cdn.bcebos.com/images/amis/plumeria.jpeg",
    "draggable": true
  }
]

图片加载失败后，通过 onError 控制是否进行 text、icon 置换

如果同时存在 text 和 icon，会优先用 text、接着 icon

{
  "type": "avatar",
  "src": "empty",
  "text": "avatar",
  "onError": "return true;"
},

样式

可以通过 style 来控制背景及文字颜色

{
  "type": "avatar",
  "text": "AM",
  "style": {
    "background": "#DB3E35",
    "color": "#FFFFFF"
  }
}

属性表

属性名	类型	默认值	说明
className	`string`		外层 dom 的类名
style	`object`		外层 dom 的样式
fit	`'contain'` \| `'cover'` \| `'fill'` \| `'none'` \| `'scale-down'`	`'cover'`	具体细节可以参考 MDN 文档
src	`string`		图片地址
defaultAvatar	`string`		占位图
text	`string`		文字
icon	`string`	`'fa fa-user'`	图标
shape	`'circle'` \| `'square'` \| `'rounded'`	`'circle'`	形状，有三种 `'circle'` （圆形）、`'square'`（正方形）、`'rounded'`（圆角）
size	`number` \| `'default'` \| `'normal'` \| `'small'`	`'default'`	`'default' \| 'normal' \| 'small'`三种字符串类型代表不同大小（分别是 48、40、32），也可以直接数字表示
gap	`number`	4	控制字符类型距离左右两侧边界单位像素
alt	`number`		图像无法显示时的替代文本
draggable	`boolean`		图片是否允许拖动
crossOrigin	`'anonymous'` \| `'use-credentials'` \| `''`		图片的 `CORS` 属性设置
onError	`string`		图片加载失败的字符串，这个字符串是一个 New Function 内部执行的字符串，参数是 event（使用 event.nativeEvent 获取原生 dom 事件），这个字符串需要返回 boolean 值。设置 `"return ture;"` 会在图片加载失败后，使用 `text` 或者 `icon` 代表的信息来进行替换。目前图片加载失败默认是不进行置换。注意：图片加载失败，不包括$获取数据为空情况

事件表

6.1.0 及以上版本

当前组件会对外派发以下事件，可以通过onEvent来监听这些事件，并通过actions来配置执行的动作，在actions中可以通过${事件参数名}或${event.data.[事件参数名]}来获取事件产生的数据，详细查看事件动作。

事件名称	事件参数	说明
click	-	点击时触发
mouseenter	-	鼠标移入时触发
mouseleave	-	鼠标移出时触发

click

鼠标点击。可以尝试通过${event.context.nativeEvent}获取鼠标事件对象。

{
  "type": "avatar",
  "onEvent": {
    "click": {
      "actions": [
        {
          "actionType": "toast",
          "args": {
            "msgType": "info",
            "msg": "${event.context.nativeEvent.type}"
          }
        }
      ]
    }
  }
}

mouseenter

鼠标移入。可以尝试通过${event.context.nativeEvent}获取鼠标事件对象。

{
  "type": "avatar",
  "onEvent": {
    "mouseenter": {
      "actions": [
        {
          "actionType": "toast",
          "args": {
            "msgType": "info",
            "msg": "${event.context.nativeEvent.type}"
          }
        }
      ]
    }
  }
}

mouseleave

鼠标移出。可以尝试通过${event.context.nativeEvent}获取鼠标事件对象。

{
  "type": "avatar",
  "onEvent": {
    "mouseleave": {
      "actions": [
        {
          "actionType": "toast",
          "args": {
            "msgType": "info",
            "msg": "${event.context.nativeEvent.type}"
          }
        }
      ]
    }
  }
}

13 KiB Raw Blame History Unescape Escape