https://github.com/dream2023/vue-ele-image
对 element-ui image组件进一步封装, 使其更简单、易用
https://github.com/dream2023/vue-ele-image
element-image element-ui-image image vue-avatar vue-ele-image vue-image vue-images
Last synced: 2 months ago
JSON representation
对 element-ui image组件进一步封装, 使其更简单、易用
- Host: GitHub
- URL: https://github.com/dream2023/vue-ele-image
- Owner: dream2023
- License: mit
- Created: 2019-06-10T06:34:39.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T23:49:07.000Z (over 2 years ago)
- Last Synced: 2024-05-31T15:26:38.514Z (12 months ago)
- Topics: element-image, element-ui-image, image, vue-avatar, vue-ele-image, vue-image, vue-images
- Language: Vue
- Size: 2.24 MB
- Stars: 4
- Watchers: 0
- Forks: 3
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-ele-image | 使 element-ui image 组件更简单、好用
[](https://dream2023.github.io/vue-ele-image/)
[](https://www.npmjs.com/package/vue-ele-image)
[](https://www.npmjs.com/package/vue-ele-image)
[](https://npmcharts.com/compare/vue-ele-image?minimal=true)
## 特点
- 增加 avatar 模式
- 可全局定义配置(lazy, fit 等)
- 参数更简单(size, radius 等)
- 保留所有 el-image 的特性
## 在线示例
[https://codepen.io/dream2023/pen/GbKjBa](https://codepen.io/dream2023/pen/GbKjBa)
## 安装
```bash
npm install vue-ele-image --save
```
### 用法
```js
// 全局 (推荐)
import EleImage from 'vue-ele-image'
// 可以配置全局默认值(配置中每一项都是可选)
Vue.use(EleImage, {
fit: 'cover',
lazy: true,
color: '#fff',
defaultSrc: 'https://dwz.cn/QYY2qkts',
backgroundColor: '#409EFF'
})
```
```js
// 局部导入
// 这里注意要有 {} 括号
import { EleImage } from 'vue-ele-image'
export default {
components: {
EleImage
}
}
```
## 示例
```html
```
```html
```
```html
```
## Props 参数
```js
props: {
username: String, // 当src不存在时, avatar模式所显示的字符
color: String, // avatar模式下, 字体颜色
backgroundColor: String, // avatar模式下, 背景色
size: Number, // size相当于 width === height === size
width: Number, // 如果给定width值, 会覆盖size值
height: Number, // 如果给定height值, 会覆盖size值
radius: String, // 圆角, 正常模式默认值 5px, 头像模式: 50%
defaultSrc: String, // 当src不存在时, 顶替src
customStyle: Object, // 自定义样式
src: String, // 同官网
alt: String, // 同官网
fit: String, // 同官网
lazy: Boolean, // 同官网
referrerPolicy: String, // 同官网
scrollContainer: [String, Object], // 同官网
}
```
## Events 事件(同官网)
## Slots 插槽(同官网)
## 相关链接
- [element-ui image 组件](https://element.eleme.cn/#/zh-CN/component/image)
- [vue-avatar](https://github.com/eliep/vue-avatar)