vue-image-pro

English Document

English Document

介绍

组件的灵感来源于小程序的 image 组件 和 vue-avatar 组件, 相当于同时拥有两者的特性, 实现了包括图片自适应、响应式、当无图片时显示文字等。

应用场景

典型的应用场景就是头像, 当有图片是显示图片, 当无图片时显示用户名

相对于 vue-avatar 的改进

• 对中文友好
• 当图片宽高不一致时, 依然可以完美显示, 不会变形

文档和示例

文档点我查看 在线示例点我查看

Installation 安装

npm install vue-image-pro  --save

Usage 用法

// 全局 (推荐)
import ImagePro from 'vue-image-pro'

// 可以配置全局默认值
Vue.use(ImagePro, {
  src: '',
  color: '',
  username: '',
  backgroundColor: '',
  size: '',
  width: '',
  height: '',
  radius: '',
  mode: ''
})

// 局部导入
// 这里注意要有 {} 括号
import { ImagePro } from 'vue-image-pro'

export default {
  ...
  components: {
    ImagePro
  },
  ...
}

<image-pro :size="100" username="vue-image-pro" background-color="#123456" />

Props

| 属性名 | 是否必填 | 默认值 | 类型 | 说明 | | --------------- | :------: | :-------------------------------: | ------ | ------------------------------------------------------------ | | username | N | (空字符) | String | 当 src 为空时,显示计算后用户名 | | src | N | - | String | 图片链接 | | defaultSrc | N | - | String | 默认图片 | | mode | N | aspectFill | String | 图片展示模式(下有详细介绍) | | size | N | 50 | Number | 宽=高=size 值, 如设置 width 和 height 属性, 会覆盖 size 属性 | | width | N | - | Number | 图片宽度 | | height | N | - | Number | 图片高度 | | color | N | 根据背景色自动计算 | String | 字体颜色 | | backgroundColor | N | 随机颜色 | String | 背景颜色 | | isShowBgColor | N | false | String | 当存在 src 时, 是否显示 backgroundColor 背景色 | | radius | N | 有图时默认为: 0, 无图时默认是: 50 | Number | 图片圆角 | | customStyle | N | {} | Object | 自定义样式 |

mode 值

| 值 | 说明 | | ----------- | ------------------------------------------------------------------------------------------------------------------------ | | aspectFill | 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取 | | scaleToFill | 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 | | aspectFit | 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来 | | widthFix | 宽度不变，高度自动变化，保持原图宽高比不变 | | heightFix | 高度不变，宽度自动变化，保持原图宽高比不变 |

支持插槽

<!-- 实例 -->
<image-pro>插槽</image-pro>

事件

| 事件名 | 说明 | | ------- | ------------ | | success | 图片加载成功 | | error | 图片加载失败 |