Encapsulate a super simple vue sharing component

Update: from May 2018, jithis will turn off sharing function. Please use http://sharesdk.mob.com/ Or search other social sharing Libraries

When developing web pages, we often encounter sharing functions. At this time, we can use ready-made tools such as JiaThis , share and share functions can be realized through simple configuration of several steps.

For example, I want to generate icon like sharing


image.png

The basic code is as follows:

<!-- JiaThis Button BEGIN -->
<div class="jiathis_style">
<span class="jiathis_txt">Share to:</span>
<a class="jiathis_button_qzone">QQ space</a>
<a class="jiathis_button_tsina">Sina Weibo</a>
<a class="jiathis_button_tqq">Tencent meager</a>
<a class="jiathis_button_renren">Renren net</a>
<a class="jiathis_button_kaixin001">Kaixin</a>

<a href="http://Www.jiatis.com/share "class =" jiatis jiatis "TXT jiatis" separator jtico jtico "jiatis" target = "blank" > more</a>
<a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript" >
var jiathis_config={
    url:"http://www.jianshu.com",
    summary:"Sharing summaries",
    title:"Share 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 -->

Roughly divided into three parts
Share icon html template, jiaatis config configuration object, http://v3.jiaatis.com/code/jia.js class library
According to the idea of Vue components, it is now packaged as a component for future use in other projects.
If it is Vue cli, create a new Share.vue. The content is simple as follows. template is empty, because customization may require external input. The component must have a config attribute, which is a configuration item object. I hung config under window, which may be risky. But there is no better way.

<template>

</template>

<script>
// User defined Daquan of JiaThis button  
// http://www.jiathis.com/customize 
export default {
  name: 'share',
  props: {
    config: {
      type: Object,
      required: true
    },
  },
  mounted: function () {
   // Optimization is needed here
    window.jiathis_config = Object.assign({
      url: "http://www.jiathis.com",
      summary: "Sharing summaries",
      title: "Share title",
      shortUrl: false,
      hideMore: false
    }, this.config)
    // Here we need vue to introduce 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>

Where sharing is needed
In template, note inline-template In this way, the component will take its content as its template. This part needs customization and cannot be written in the share component.

    <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

Tags: Javascript Vue JQuery Attribute

Posted on Tue, 03 Dec 2019 09:38:08 -0500 by alex3