1.0.0 • Published 5 years ago
view-avatar v1.0.0
a vue component -> view-avatar
源码文件 /src/index
打包后文件 /dist/index
How to use
- 安装
npm i -S view-avatar
- 在.vue文件中引入
<script>
import ViewAvatar from 'view-avatar'
export default {
components: { ViewAvatar }
}
</script>具体请运行 npm run dev 查看demo
代码请看example文件夹
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| src | 图片src地址 | String | — | — |
| text | 生成图片的源文字 | String | — | — |
| width | 宽度 | String (px) | ||
| height | 高度 | String (px) | ||
| quickWidth | 当不想使用width,height,使用此属性可以直接设置宽高一样的值 | String (px) | ||
| color | 文字默认颜色 | String | — | — |
| bgColor | 图片默认底色 | String | ||
| colors | 图片的文字颜色组,当不设置color时,根据文字MD5的值,设置图片的文字颜色 | String | ||
| bgColors | 图片的底色颜色组,当不设置bgColor时,根据文字MD5的值,设置图片的底色颜色 | String | ||
| borderRadius | 图片显示形状,可以显示为圆形的方式,也可以设置关闭,默认有2px的border-radius | String | ||
| textImgError | 当图片显示错误时是否使用文字的方式显示图片,如不使用则默认用图片错误的方式处理 | Boolean | false | |
| styles | 图片的颜色style样式,可以覆盖文字,底色颜色等 | Object | {} | |
| enablePopper | 是否使用popper显示图片的信息,tooltips的效果 | Boolean | false | |
| placement | 使用的popper出现的位置(top, right, bottom, left) | String | top | |
| popperOptions | popper的options属性(vue-popperjs) |
slot
| —(默认方式) | 直接自定义图片 |
| imgError | 图片错误处理 |
| text | 文字自定义显示 |
| popper-text | 自定义显示tooltips的内容 |