脚本宝典收集整理的这篇文章主要介绍了

分享一个vue的生成头像组件

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>今天看到一个vue的生成头像的组件--<a href="http://www.wheelsfactory.cn/#/detail?id=83" rel="nofollow noreferrer" target="_blank">vue-avator</a>。这个组件很实用,可以生成手机或者邮箱通讯录里常见的用户名缩写形式的头像。当然也支持用户上传图片的头像。</p> <p><span class="img-wrap"><img data-src="/img/bVQ4vJ?w=878&amp;h=318" src="/img/bVQ4vJ?w=878&amp;h=318" alt="图片描述" title="图片描述" style="cursor: pointer; display: inline;"></span></p> <p>它可以支持用户自定义头像的首字母颜色和背景色,当然如果你不设定,它会根据用户名的长度计算出相应的背景色,并且通过背景色计算出相匹配的字母颜色。</p> <p><span class="img-wrap"><img data-src="/img/bVQ4vM?w=1514&amp;h=1600" src="/img/bVQ4vM?w=1514&amp;h=1600" alt="图片描述" title="图片描述" style="cursor: pointer; display: inline;"></span></p> <h2 id="articleHeader0">用来计算用户姓名大写字母的规则</h2> <ul> <li> <p>空格和连字符处分隔用户名</p> </li> <li> <p>使用每部分的第一个字母</p> </li> <li> <p>不要使用多于3个字母做姓名大写</p> </li> <li> <p>不要使用多于3个字母做姓名大写</p> </li> </ul> <h2 id="articleHeader1">安装</h2> <p>通过NPM安装</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install vue-avatar " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>npm <span class="hljs-keyword">install</span> vue-avatar </code></pre> <h2 id="articleHeader2">插件应用</h2> <p>vue-avatar是一个UMD模块,可以在CommonJS和AMD的环境中被当作模块使用,在无模块的环境中,Avatar将被注册为全局变量。<br />ES6</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import Avatar from 'vue-avatar/dist/Avatar' <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default {</p> <p> components: {<br /> Avatar<br /> },</p> <p>}<br /> <avatar username=&quot;Jane Doe&quot;></avatar><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword">import</span> Avatar <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-avatar/dist/Avatar'</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">components</span>: { Avatar }, } &lt;avatar username=<span class="hljs-string">"Jane Doe"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">avatar</span>&gt;</span></span> </code></pre> <p>CommonJS</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a> = require('vue')<br /> var Avatar = require('vue-avatar')</p> <p>var YourComponent = <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.extend({<br /> components: {<br /> 'avatar': Avatar.Avatar<br /> }<br /> })<br /> Browser<br /> <script src=&quot;path/to/vue/vue.min.js&quot;></script><br /> <script src=&quot;path/to/vue-avatar/dist/vue-avatar.min.js&quot;></script></p> <p>new Vue({<br /> components: {<br /> 'avatar': Avatar.Avatar<br /> }<br /> })<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword">var</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> = <span class="hljs-built_in">require</span>(<span class="hljs-string">'vue'</span>) <span class="hljs-keyword">var</span> Avatar = <span class="hljs-built_in">require</span>(<span class="hljs-string">'vue-avatar'</span>) <span class="hljs-keyword">var</span> YourComponent = Vue.extend({ <span class="hljs-attr">components</span>: { <span class="hljs-string">'avatar'</span>: Avatar.Avatar } }) Browser &lt;script src=<span class="hljs-string">"path/to/vue/vue.min.js"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span> &lt;script src=<span class="hljs-string">"path/to/vue-avatar/dist/vue-avatar.min.js"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span> <span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">components</span>: { <span class="hljs-string">'avatar'</span>: Avatar.Avatar } }) </code></pre> <p><a href="http://www.wheelsfactory.cn/" rel="nofollow noreferrer" target="_blank">轮子工厂</a>--一个分享优秀的vue,angular组件的网站</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

分享一个vue的生成头像组件

全部内容,希望文章能够帮你解决

分享一个vue的生成头像组件

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过