0.3.2 • Published 5 years ago
@luanedcosta/vue-profile-picture v0.3.2
Vue Profile Picture
Lightweight vue component to render the user picture or his name initials It's easy to customize with your style and change the behavior using the properties of the component.
Instalation
To install the package in your project you can type:
- npm i @luanedcosta/vue-profile-picture
- yarn add @luanedcosta/vue-profile-picture
- Or download it from the repository: https://github.com/LuanEdCosta/vue-profile-picture
Once installed you can use the component as a plugin:
There's no options, so you can ignore the second parameter of Vue.use()
import VueProfilePicture from '@luanedcosta/vue-profile-picture'
Vue.use(VueProfilePicture)Or you can import the component locally:
import { VueProfilePicture } from '@luanedcosta/vue-profile-picture'
export default {
components: { VueProfilePicture }
}Simple Usage
If exists an image the component will render a <img> tag. If the user doesn't have an image his initials will appear in place of the image.
<vue-profile-picture name="Username" img="Image src"/>Props
The table below contains all component props.
| Property | Type | Default | Required | Explanation |
|---|---|---|---|---|
| name | String | true | Name of the user | |
| classes | String | null | false | HTML class property for the <img> tag or <div> with the initials |
| styles | Object | null | false | HTML style property for the <img> tag or <div> with the initials |
| noStyle | Boolean | false | false | Remove all default component classes to allow you to define your own css classes |
| numOfInitials | Number | 2 | false | Number of letters that will appear with the user doesn't have image |
| nameSeparator | String | white space | false | Character or string that separates each user name |
| transform | Number | 1 | false | 1 = Initials uppercase; 2 = Initials lowercase; 0 = Don't transform the text |
| firstName | Boolean | false | false | The component will show only the firstname initials |
| lastName | Boolean | false | false | The component will show only the lastname initials |
| def | String | '-' | false | If the component didn't find an image neither the user name the component will display this property value on screen |
| img | String | null | false | The src for the image. The same as the src property of the <img> tag |
| alt | String | null | false | The same as alt property of the <img> tag |
| draggable | String | "true" | false | If true the image can be draggable |