view-avatar

a vue avatar component, avatar

Usage no npm install needed!

<script type="module">
  import viewAvatar from 'https://cdn.skypack.dev/view-avatar';
</script>

README

a vue component -> view-avatar

源码文件 /src/index

打包后文件 /dist/index

How to use

  1. 安装 npm i -S view-avatar

  2. 在.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的内容

LICENSE

MIT