配置

配置 类型 默认值 备注
attachId String '' 附件Id
preview Boolean false 点击图片是否打开预览
fit String 'none' 'fill' / 'contain' / 'cover' / 'none' / 'scale-down'
alt String '' 原生alt
referrer-policy String '' 原生referrerPolicy
lazy Boolean false 是否开启懒加载
scroll-container string / HTMLElement 最近一个 overflow 值为 auto 或 scroll 的父元素 开启懒加载后，监听 scroll 事件的容器
preview-src-list Array [] 图片预览列表
z-index Number 2000 设置图片预览的 z-index
on-load (event:事件对象,image:图片对象)=>{} 加载完成
on-error (error)=>{} 加载失败

插槽

slot 备注
default 自定义({image,alt})
loading 加载中
empty 没有图像
error 加载失败

方法

方法名 定义 备注
refresh 重新获取图片

基础用法

fit

fit=’none’

<p-image attach-id="b0b517cb3e824ce9843d9190fc8c9e90"></p-image>

fit=’contain’

<p-image attach-id="b0b517cb3e824ce9843d9190fc8c9e90" fit="contain"></p-image>

fit=’fill’

<p-image attach-id="b0b517cb3e824ce9843d9190fc8c9e90" fit="fill"></p-image>

fit=’cover’

<p-image attach-id="b0b517cb3e824ce9843d9190fc8c9e90" fit="cover"></p-image>

fit=’scale-down’

<p-image attach-id="b0b517cb3e824ce9843d9190fc8c9e90" fit="scale-down"></p-image>

占位内容

<p-image>
  <div slot="empty" class="image-empty">暂无图片</div>
</p-image>

加载中

<p-image attach-id="b0b517cb3e824ce9843d9190fc8c9e90">
  <div slot="loading" class="image-loading">加载中</div>
</p-image>

加载失败

默认

<p-image attach-id="abc"> </p-image>

slot

<p-image attach-id="abc">
  <div slot="error" class="image-error">加载失败</div>
</p-image>

preview

<p-image attach-id="b0b517cb3e824ce9843d9190fc8c9e90" fit="cover" :preview="true"></p-image>

Demo样式

.p-image {
  width: 200px;
  height: 200px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  & + .p-image {
    margin-left: 10px;
  }
}

参考

Element - image

文档更新时间: 2021-05-12 18:47   作者：管理员