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

vue-social-sharing社交分享组件

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>这是最近看到的一个vue的社交分享组件。<a href="http://www.wheelsfactory.cn/#/detail?id=78" rel="nofollow noreferrer" target="_blank">vue-social-sharing</a>支持facebook,Google +,LinkedIn,Pinterest,Reddit,Twitter,VKontakte,Weibo,Whatsapp平台的分享功能。使用也十分简单。<br />这里是<a href="https://nicolasbeauvais.github.io/vue-social-sharing/" rel="nofollow noreferrer" target="_blank">Demo</a></p> <h2 id="articleHeader0">安装</h2> <p>通过NPM安装<br /><code>npm install --save vue-social-sharing</code><br />通过Yarn安装<br /><code>yarn add vue-social-sharing</code><br />通过Bower安装<br /><code>bower install vue-social-sharing</code></p> <h2 id="articleHeader1">插件应用</h2> <p>Browserify / Webpack加载组件库</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 SocialSharing = require('vue-social-sharing'); Vue.use(SocialSharing); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs php"><code><span class="hljs-keyword">var</span> SocialSharing = <span class="hljs-keyword">require</span>(<span class="hljs-string">'vue-social-sharing'</span>); <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.<span class="hljs-keyword">use</span>(SocialSharing); </code></pre> <p>html加载组件库</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="<script src=&quot;/dist/vue-social-sharing.min.js&quot;></script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/dist/vue-social-sharing.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>使用组件</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="<social-sharing url=&quot;https://vuejs.org/&quot; inline-template></p> <div> <network network=&quot;facebook&quot;><br /> <i class=&quot;fa fa-facebook&quot;></i> Facebook<br /> </network><br /> <network network=&quot;googleplus&quot;><br /> <i class=&quot;fa fa-google-plus&quot;></i> Google +<br /> </network><br /> <network network=&quot;linkedin&quot;><br /> <i class=&quot;fa fa-linkedin&quot;></i> LinkedIn<br /> </network><br /> <network network=&quot;pinterest&quot;><br /> <i class=&quot;fa fa-pinterest&quot;></i> Pinterest<br /> </network><br /> <network network=&quot;reddit&quot;><br /> <i class=&quot;fa fa-reddit&quot;></i> Reddit<br /> </network><br /> <network network=&quot;twitter&quot;><br /> <i class=&quot;fa fa-twitter&quot;></i> Twitter<br /> </network><br /> <network network=&quot;vk&quot;><br /> <i class=&quot;fa fa-vk&quot;></i> VKontakte<br /> </network><br /> <network network=&quot;weibo&quot;><br /> <i class=&quot;fa fa-weibo&quot;></i> Weibo<br /> </network><br /> <network network=&quot;whatsapp&quot;><br /> <i class=&quot;fa fa-whatsapp&quot;></i> Whatsapp<br /> </network> </div> <p></social-sharing><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">social-sharing</span> <span class="hljs-attr">url</span>=<span class="hljs-string">"https://<a href="http://www.js-code.com/tag/vuejs" title="浏览关于“vuejs”的文章" target="_blank" class="tag_link">vuejs</a>.org/"</span> <span class="hljs-attr">inline-template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">network</span> <span class="hljs-attr">network</span>=<span class="hljs-string">"facebook"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fa fa-facebook"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Facebook <span class="hljs-tag">&lt;/<span class="hljs-name">network</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">network</span> <span class="hljs-attr">network</span>=<span class="hljs-string">"googleplus"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fa fa-google-plus"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Google + <span class="hljs-tag">&lt;/<span class="hljs-name">network</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">network</span> <span class="hljs-attr">network</span>=<span class="hljs-string">"linkedin"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fa fa-linkedin"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> LinkedIn <span class="hljs-tag">&lt;/<span class="hljs-name">network</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">network</span> <span class="hljs-attr">network</span>=<span class="hljs-string">"pinterest"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fa fa-pinterest"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Pinterest <span class="hljs-tag">&lt;/<span class="hljs-name">network</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">network</span> <span class="hljs-attr">network</span>=<span class="hljs-string">"reddit"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fa fa-reddit"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Reddit <span class="hljs-tag">&lt;/<span class="hljs-name">network</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">network</span> <span class="hljs-attr">network</span>=<span class="hljs-string">"twitter"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fa fa-twitter"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Twitter <span class="hljs-tag">&lt;/<span class="hljs-name">network</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">network</span> <span class="hljs-attr">network</span>=<span class="hljs-string">"vk"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fa fa-vk"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> VKontakte <span class="hljs-tag">&lt;/<span class="hljs-name">network</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">network</span> <span class="hljs-attr">network</span>=<span class="hljs-string">"weibo"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fa fa-weibo"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Weibo <span class="hljs-tag">&lt;/<span class="hljs-name">network</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">network</span> <span class="hljs-attr">network</span>=<span class="hljs-string">"whatsapp"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fa fa-whatsapp"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Whatsapp <span class="hljs-tag">&lt;/<span class="hljs-name">network</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">social-sharing</span>&gt;</span> </code></pre> <h2 id="articleHeader2">插件参数</h2> <table> <thead> <tr> <th>名称</th> <th>类型</th> <th>默认值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code>url</code></td> <td>String</td> <td>current</td> <td>分享的url</td> </tr> <tr> <td><code>title</code></td> <td>String</td> <td>-</td> <td>分享的标题</td> </tr> <tr> <td><code>description</code></td> <td>String</td> <td>-</td> <td>分享的描述</td> </tr> <tr> <td><code>quote</code></td> <td>String</td> <td>-</td> <td>facebook的quote,只有facebook使用</td> </tr> <tr> <td><code>hashtags</code></td> <td>String</td> <td>-</td> <td>标签,用逗号分割</td> </tr> <tr> <td><code>twitter-user</code></td> <td>String</td> <td>-</td> <td>Twitter user,只有twitter使用</td> </tr> <tr> <td><code>media</code></td> <td>String</td> <td>-</td> <td>多媒体链接,只有Pinterest 使用</td> </tr> </tbody> </table> <h2 id="articleHeader3">事件</h2> <table> <thead> <tr> <th>名称</th> <th>数据</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code>social_shares_open</code></td> <td>Network object, shared url</td> <td>当分享弹出框打开时触发</td> </tr> <tr> <td><code>social_shares_change</code></td> <td>Network object, shared url</td> <td>当已有分享弹出框打开,用户又触发一个分享弹出框时触发</td> </tr> <tr> <td><code>social_shares_close</code></td> <td>Network object, shared url</td> <td>当分享弹出框关闭或使用其它分享弹出框时触发</td> </tr> </tbody> </table> <p>参考地址:<a href="http://www.wheelsfactory.cn/" rel="nofollow noreferrer" target="_blank">轮子工厂</a></p> <p></code></p>

总结

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

vue-social-sharing社交分享组件

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

vue-social-sharing社交分享组件

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

80%的人都看过