vuejs 组件_VueJS 2的头像组件

vuejs 组件

Vue头像 (VueAvatar)

Avatar component for VueJS 2

VueJS 2的头像组件

• Use username to create letter avatar (up to 3 chars)

  使用用户名创建字母头像(最多3个字符)

• If an image src is provided, will try to use it as avatar

  如果提供了图片src，将尝试将其用作头像

• Images are lazy loaded. If it is not loaded successfully, it will not be used (letter avatar as fallback)

  图像是延迟加载的。 如果未成功加载，则将不使用它(字母头像作为后备)

安装 (Installation)

npm install --save @lossendae/vue-avatar

用法 (Usage)

ES6 (ES6)

import Vue from 'vue'
import VueAvatar from '@lossendae/vue-avatar'
 
// If not installed globally
export default {
    ...
    components: {
        VueAvatar
    },
    ...
}

CommonJS

普通JS

const Vue = require('vue')
const VueAvatar = require('@lossendae/vue-avatar')
 
// In your component if not installed globally
Vue.extend({
    ...
    components: {
        'vue-avatar': VueAvatar.VueAvatar
    },
    ...
})

在全球范围内提供 (Make available globally)

Vue.component('vue-avatar', VueAvatar)

用法 (Usage)

<vue-avatar :username="'Franck Zappatta'" :src="'/path/to/img'"></vue-avatar>

道具 (Props)

delay道具 (delay prop)

Specify the delay in milliseconds to wait before attempting to load the image src.

指定尝试加载图像src之前要等待的延迟(以毫秒为单位)。

This allows to show the letter avatar for the given time and then eventually load the image.

这样可以显示给定时间的字母头像，然后最终加载图像。

Vue-avatar uses vuejs built-in transitions to let you switch smoothly between the letters and the image.

Vue-avatar使用vuejs内置的过渡功能 ，可让您在字母和图像之间平稳切换。

By default, the transition will not do anything, but with a little bit of css you can for example flip the avatar to the image once loaded :

默认情况下，过渡不会执行任何操作，但是只需一点点CSS，您就可以将头像转换为加载后的图像：

/* Add this to your css file or into your component style to flip the avatar into the image if the image is loaded successfully */
/* The animation should also be triggered when the prop src changes */
.vue-avatar-enter-active {
  animation: vue-avatar-in .8s;
}
 
.vue-avatar-leave-active {
  animation: vue-avatar-in reverse;
}
 
@keyframes vue-avatar-in {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
 
  40% {
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    animation-timing-function: ease-in;
  }
 
  60% {
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
 
  80% {
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
 
  to {
    transform: perspective(400px);
  }
}
 
@keyframes vue-avatar-out {
  from {
    transform: perspective(400px);
  }
 
  30% {
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
 
  to {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

The above transition was made using animate.css

上面的转换是使用animate.css进行的

默认颜色 (Default colors)

In you want to override those colors, use the colors props by passing an array of hsl colors

在您要覆盖这些颜色的情况下，通过传递hsl颜色数组来使用颜色道具

See below the values used for the above example:

请参见下面用于以上示例的值：

const COLORS_HSL = [
    [6, 71, 60],
    [340, 85, 66],
    [291, 49, 60],
    [263, 49, 63],
    [232, 46, 64],
    [218, 93, 67],
    [187, 73, 70],
    [187, 73, 58],
    [175, 43, 50],
    [151, 44, 53],
    [88, 53, 59],
    [66, 73, 59],
    [51, 95, 53],
    [47, 100, 49],
    [40, 100, 50],
    [16, 100, 69],
    [0, 0, 76],
    [201, 17, 62],
    [17, 16, 56],
    [0, 0, 64],
    [233, 47, 79],
    [262, 49, 74],
    [0, 0, 76],
    [187, 73, 70],
    [15, 15, 69],
    [88, 52, 67],
]

发展历程 (Development)

# Install dependencies
yarn install
 
# run the unit tests
yarn test
 
# Build
yarn build

翻译自: https://vuejsexamples.com/avatar-component-for-vuejs-2/

vuejs 组件