封装一个超级简单的vue分享组件
更新： 2018-5月起 jiathis关闭分享功能，请使用 http://sharesdk.mob.com/ 或搜索其他社会化分享类库
开发网页经常遇到分享功能，这时候可以利用现成的工具比如 JiaThis，通过几步简单配置就实现分享共享功能啦。
比如我想生成图标式的分享
image.png
得到的基础代码如下：
<!-- JiaThis Button BEGIN -->
<div class="jiathis_style">
<span class="jiathis_txt">分享到：</span>
<a class="jiathis_button_qzone">QQ空间</a>
<a class="jiathis_button_tsina">新浪微薄</a>
<a class="jiathis_button_tqq">腾讯微薄</a>
<a class="jiathis_button_renren">人人网</a>
<a class="jiathis_button_kaixin001">开心网</a>
<a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank">更多</a>
<a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript" >
var jiathis_config={
url:"http://www.jianshu.com",
summary:"分享摘要",
title:"分享标题 ##",
shortUrl:false,
hideMore:false
}
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>
<!-- JiaThis Button END -->大概分成三部分
分享图标html模版，jiathis_config 配置对象， http://v3.jiathis.com/code/jia.js类库
根据Vue组件的思想，现在封装成一个组件，方便将来在其他项目中使用。
如果是vue-cli，新建一个Share.vue，内容如下很简单。template为空，因为可能是自定义需要外部传入，组件必须带一个config属性，是配置项对象，我把config挂到了window下，这样可能有风险。但是目前找不到更好的办法。
<template>
</template>
<script>
// JiaThis 按钮自定义大全
// http://www.jiathis.com/customize
export default {
name: 'share',
props: {
config: {
type: Object,
required: true
},
},
mounted: function () {
// 这里需要优化
window.jiathis_config = Object.assign({
url: "http://www.jiathis.com",
summary: "分享摘要",
title: "分享标题",
shortUrl: false,
hideMore: false
}, this.config)
// 这里需要vue引入jquery
// http://api.jquery.com/jquery.getscript/
$.getScript('http://v3.jiathis.com/code/jia.js')
},
computed: {
},
methods: {
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>在需要用到分享的地方 template内，注意 inline-template，这样会把组件将把它的内容当作它的模板，这部分需要自定义不能写死在share组件内。
<share :config="shareConfig" inline-template>
<div class="jiathis_style_32x32">
<a class="jiathis_button_tqq"></a>
<a class="jiathis_button_cqq"></a>
<a class="jiathis_button_qzone"></a>
<a class="jiathis_button_tsina"></a>
<a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank"></a>
<a class="jiathis_counter_style"></a>
</div>
</share>
image.png
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.12.19 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读