第十三篇 VUE中使用头像插件 multiavatar，超级有趣的头像生成插件，提升开发的乐趣

最近在开发中，看到一个很有趣的插件-multiavatar，查看了一下官方，功能很强大，能够依据输入的内容，随机进行生成一个头像，觉得特别的有乐趣，特在这分享一下。

官方地址：multiavatar 官方地址

以下是个人在 VUE 中写的一个简易 demo, 效果如下：

废话不多说，直接说下怎么在 vue 中使用。

1. npm 安装 multiavatar

npm install @multiavatar/multiavatar -S

2. 简单的一个 demo

<template><div><div class="avtart"><div v-html="avatar" class="avtart-block"></div></div><div class="input-block"><el-inputclass="input-text"v-model="userId"@input="changeInput"></el-input></div></div>
</template><script>
import multiavatar from '@multiavatar/multiavatar'
export default {components: {},data() {return {avatar: '',userId: ''}},watch: {},methods: {changeInput(value) {console.log('b', value)this.avatar = multiavatar(value)}}
}
</script><style lang="scss" scoped>
.avtart-block {height: 300px;width: 300px;border-radius: 50%;margin-left: 460px;
}
.input-block {width: 100%;text-align: center;margin-top: 40px;.input-text {width: 300px;}
}
.avtart {width: 100%;text-align: center;
}
</style>

3. 在开发中学习中，这样多了很多的乐趣，感谢支持

第十三篇 VUE中使用头像插件 multiavatar，超级有趣的头像生成插件，提升开发的乐趣相关推荐

wordpress真正静态化插件really-static(纯静态html网页生成插件)
初期被推荐了两款插件:cos-html-catch,,super static cache,really static,本人一直使用的是super static cache还是不错的.但通过个人试用筛 ...
第十三篇人生中的第一桶金
不知不觉,时间过的飞快,又到了星期五了,那么离星期六和星期天的日子还远吗...... 昨晚的聚餐又被同一个借口给取消了,哎,今天是无论如何都要他们请我吃大餐呵呵.... 好开心现在来说一下 ...
《小白兔到大黑牛》第十三篇maven中Hadoop中类的练习
pom.xml配置如下 [html] view plain copy<project xmlns="http://maven.apache.org/POM/4.0.0" xm ...
vue中通过monment.js插件来将时间戳转换为常用的时间格式
vue中通过monment.js插件来将时间戳转换为常用的时间格式在项目中很多时候需要展示时间信息,我们一般都是用时间戳来传输时间信息,但是我们在页面展示的话是我们想要的常见格式,比如:2021-4 ...
Vue 中常见的面试题/知识点整理
看看面试题,只是为了查漏补缺,看看自己那些方面还不懂.切记不要以为背了面试题,就万事大吉了,最好是理解背后的原理,这样面试的时候才能侃侃而谈.不然,稍微有水平的面试官一看就能看出,是否有真才实学还是刚 ...
vue缓存服务器文件到本地,vue中,在本地缓存中读写数据的方法
1.安装good-storage插件 cnpm i good-storage --save 2.读/写的方法 common/js/cache.js: import storage from 'good ...
vue中create 什么触发_vue中eventbus被多次触发（vue中使用eventbus踩过的坑）
一开始的需求是这样子的,我为了实现两个页面组件之间的数据传递,假设我有页面A,点击页面A上的某一个按钮之后,页面会自动跳转到页面B,同时我希望将页面A上的某一些参数携带过去给页面B.(我知道,小参数的 ...
vue中this.init用法_Vue中的this.$options.data()和this.$data用法说明
问题项目里遇到一个问题,用this.$options.data()重置组件data时,data()里用this获取的props或method都为undefined,代码简化如下: export de ...
在Vue中使用eCharts的地图图表，及生成自定义地图数据（乡镇级）
如何在Vue中使用eCharts的地图图表,及如何生成自定义地图数据(乡镇级) 文章目录一.在Vue使用ECharts地图功能二.生成地图数据 1.安装Bigemap 程序 2.生成需要的各乡镇地 ...

第十三篇 VUE中使用头像插件 multiavatar，超级有趣的头像生成插件，提升开发的乐趣

第十三篇 VUE中使用头像插件 multiavatar，超级有趣的头像生成插件，提升开发的乐趣相关推荐

最新文章

热门文章