vue-image-pro

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

mode 值

支持插槽

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

事件