分享qq,wx,qqZone,weibo基于vue

DOM
<span class="title_bot_txt">分享至</span>
          <div class="share-icon-box">
             <div class="share-icon" title="微信分享">
              <span class="iconfont iconzk-wechat" v-popover:wechatShare></span>
              <span class="icon_txt">微信</span>
              <!-- 微信二维码 -->
              <el-popover ref="wechatShare" placement="left" trigger="hover">
                <div class="wechat-qrcode-box">
                  <div id="wechat-share-qrcode"></div>
                  <div>打开微信扫一扫</div>
                </div>
              </el-popover>
            </div>
            <div class="share-icon" title="QQ分享" @click="shareClick('qq', news, categoryList)">
              <span class="iconfont iconQQ"></span>
              <span class="icon_txt">QQ</span>
            </div>
            <div class="share-icon" title="微博分享" @click="shareClick('weibo', news, categoryList)">
              <span class="iconfont iconxinlang"></span>
              <span class="icon_txt">微博</span>
            </div>
            <div class="share-icon" title="QQ空间分享" @click="shareClick('qqZone', news, categoryList)">
              <span class="iconfont iconQQkongjian"></span>
              <span class="icon_txt">QQ空间</span>
            </div>
          </div>
        </div>

 /**
     * @Description: 分享按钮点击
     * @param {String} type 分享类型
     * @param {Object} news 新闻
     * @param {Array} categoryList 类目列表
     * @LastEditTime: Do not edit
     * @Date: 2019-03-05 18:45:15
     */
    shareClick: function(type, news, categoryList) {
      console.log("share Click", type, news);
      if (type !== "wechat") {
        const { content = "", title: newsTitle = "", coverImage: image } = news;
        let summary = content.replace(/</?[^>]*>/g, "");
        summary = summary.replace(/&w+;/g, "");
        summary = summary.substring(0, 50);
        const category = categoryList.map(ele => ele.name);
        const info = {
          url: window.location.href,
          summary,
          image
        };
        info.title =
          type === "qq" ? newsTitle : `${newsTitle}${category.join("")}`;
        info.desc =
          type === "qq" ? `${newsTitle}${category.join("")}` : newsTitle;
        ShareFun(type, info);
      }
    },

// shareFun.js组件
/**
 * @Description: 分享公共函数
 * @params {String} type 分享类型 // qq or weibo 目前只有两种
 * @params {Object} info 分享的内容
 *                  info: {
 *                      url: String 分享的链接[必选]
 *                      title: String 分享链接的标题[qq必选]
 *                      summary: String 分享链接的内容概述[可选]
 *                      desc: String 分享的描述内容 [可选]
 *                      image: String 分享内容的封面图 [可选]
 *                  }
 * @return 打开一个新的分享窗口
 * @LastEditTime: Do not edit
 * @Date: 2019-03-19 16:06:49
 */
const urlList = {
    qq: 'http://connect.qq.com/widget/shareqq/index.html?url={{url}}&title={{title}}&source={{source}}&desc={{desc}}&pics={{image}}&summary={{summary}}',
    weibo: 'http://service.weibo.com/share/share.php?url={{url}}&title={{title}}&source={{source}}&desc={{desc}}&pic={{image}}&summary={{summary}}',
    qqZone: 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={{url}}&title={{title}}&source={{source}}&desc={{desc}}&pics={{image}}&summary={{summary}}',
};
export default function(type, info) {
    console.log('info', info);
    if (urlList[type] && urlList[type].length) {
        // 替换url
        const shareUrl = urlList[type].replace(/{{(w+)}}/g, (match, p1) => {
            return encodeURIComponent(info[p1] || '');
        });
        // 获取窗口的宽高
        const screenInfo = window.screen;
        const newWindowArea = {
            height: screenInfo.height / 3 * 2,
             screenInfo.width / 3 * 2,
        };
        // 打开窗口
        window.open(shareUrl, 'newwindow', `height=${newWindowArea.height}, width=${newWindowArea.width}`);
    } else {
        console.warn('url不存在');
    }
}

// 生成微信分享二维码
    // 跳转到h5显示的相同资讯
    generateQRCode: function() {
      const url = window.location.href; //这里之所以取当前的链接是由于pc端做了正则适配到h5的链接，其实本质就是链接和二维码的转换而已.
      let QRCode = this.$QRCode;
      this.qrcodeImg = new QRCode("wechat-share-qrcode", {
         128,
        height: 128,
        text: url, // 二维码地址
        colorDark: "#000",
        colorLight: "#fff"
      });
    },
// mounted(){

// 生成wx二维码

this.generateQRCode();

}