封装一个超级简单的vue分享组件

  1. 云栖社区>
  2. 博客>
  3. 正文

封装一个超级简单的vue分享组件

飞凡的陀螺 2017-12-19 16:09:00 浏览444
展开阅读全文

更新: 2018-5月起 jiathis关闭分享功能,请使用 http://sharesdk.mob.com/ 或搜索其他社会化分享类库

开发网页经常遇到分享功能,这时候可以利用现成的工具比如 JiaThis,通过几步简单配置就实现分享共享功能啦。

比如我想生成图标式的分享


img_324a90ade9be299af561df95cdaf281e.png
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>
img_8e856bec3f2917992b25c02f691e2abb.png
image.png

网友评论

登录后评论
0/500
评论
飞凡的陀螺
+ 关注