vue中使用vue-social-share

vue中使用 vue-social-share 社交分享

1. 插件安装

npm i vue-social-share

2. main.js 中引入

import share from 'vue-social-share'
Vue.use(share);
import "vue-social-share/dist/client.css"

3. 使用

<share :config="share_config"></share>

4. config 配置

share_config: {
    url: `${location.href}`, // 网址，默认使用 window.location.href
    source: "", // 来源（QQ空间会用到）, 默认读取head标签：<meta name="site" content="http://overtrue" />
    title: "", // 标题，默认读取 document.title 或者 <meta name="title" content="share.js" />
    description: "", // 描述, 默认读取head标签：<meta name="description" content="PHP弱类型的实现原理分析" />
    image: "", // 图片, 默认取网页中第一个img标签

    sites: ["weibo", "wechat", "qzone", "qq"], // 启用的站点
    // disabled: ["google", "facebook", "twitter"], // 禁用的站点
    wechatQrcodeTitle: "微信扫一扫：分享", // 微信二维码提示文字
    wechatQrcodeHelper:
      "<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>",
}

常见问题

1. 图标无法展示

解决办法：找到node_modules->vue-social-share->dist->client.css，修改其资源路径

@font-face {
  font-family: "socialshare";
  src: url(./static/iconfont.eot);
  src: url(./static/iconfont.eot?#iefix) format("embedded-opentype"), url(./static/iconfont.woff) format("woff"), url(./static/iconfont.ttf) format("truetype"), url(./static/iconfont.svg#iconfont) format("svg")
}