封装一个超级简单的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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏xingoo, 一个梦想做发明家的程序员

【AngularJS】—— 5 表单

这部分,我们写一个表单程序,使用angularjs的检测并完成表单属性的获取与拷贝。   在AngularJS中,也支持html5中多种控件的自动检测,如...

2175
来自专栏宝塔面板

腾讯云中宝塔面板升级专业版

4882
来自专栏编程微刊

jedate-开始使用一款好用的时间插件

2023
来自专栏ytkah

用dedecms自定义表单创建简易自助预约系统

  建站往往需要根据客户的需求来增加相应的功能,比如预约。平时用比较多的是织梦系统,那么如何用dedecms自定义表单创建简易自助预约系统呢? ?   进入de...

3345
来自专栏娱乐心理测试

微信小程序如何获取地理位置和进行地图导航

4935
来自专栏编程微刊

js仿通知栏新消息实时推送更新效果

在最近的项目里面,用到websocket做消息推送,其中有这样的一个效果,在消息列表的模块,接收到很多条信息,展示在界面的是最近的十条接受到的消息,实时更新模块...

2303
来自专栏DeveWork

WordPress免插件仅代码实现文章归档模板 II

不多说了,本站目前使用的效果,可以到我的存档页一览,该方法来自zww,感谢原作者,在这之前,建议你: 1、你的博客存档页面地址后面的应该为/articles,而...

5398
来自专栏企鹅号快讯

来,聊一聊性能优化

不管是应付前端面试还是改进产品体验,性能优化都是躲不开的话题。这里我们就简单聊一聊性能优化。传输快 vs 体验快 优化的目的是让用户有“快”的感受,那如何让用户...

2308
来自专栏Python爬虫与算法进阶

App爬虫思路

但是我觉得不够全,首先对于一般的HTTP和HTTPS协议,通过最基本的Fiddler和Charles就可以抓包,具体方法请Google。需要保证两点:App走代...

7712
来自专栏猿天地

hbuilder APP 定位提示苹果审核不通过

APP已经提交给苹果进行审核了,今天看看审核结果,居然挂了,给了几点问题,其中有一点就是关于定位的问题: Guideline 5.1.5 - Legal - P...

39110

扫码关注云+社区

领取腾讯云代金券