peteralbus / vue3-social-share

a share component for vue 3.0

vue3-social-share

作者：PeterAlbus

@Author PeterAlbus

联系邮箱：[email protected]

协议及开源库使用

MIT License

网页二维码的生成使用'qrcodejs2'(qrcodejs2 - npm (npmjs.com)) 在0.1.4后修改为了'qrcode.vue'，对vite也拥有了支持

0.1.7进行了优化，使得传入的参数会自动进行url编码

分享栏的图标参考share.js——overtrue/share.js (github.com)

简介

使用该组件需要Vue版本 > 3.2, Vue2用户可使用vue-social-share

使用本组件可以快速获得一个分享栏用于分享当前页面

没什么技术含量，使用TypeScript编写。

如果有高度定制需求可以自己写，原理就是打开这些软件提供的分享链接。

支持：QQ、微博、微信、QQ空间、豆瓣、领英、点点、Facebook、推特、谷歌+

快速开始

安装

npm i vue3-social-share -S

引入

全局引入，在main.js中

import PeterAlbusVue from 'vue3-social-share';
import 'vue3-social-share/lib/index.css'

或按组件单个引用(实际上本库仅有一个组件)，在.vue文件中

<script>
import {Share} from 'vue3-social-share';
import 'vue3-social-share/lib/index.css'
    
export default{
    name:'viewName',
    component:{
        Share
    }
}
</script>

使用

<templete>
    <Share></Share>
</templete>

或带上参数

<templete>
    <Share
		:url="baseUrl+blog.blogId"
		:title="blog.blogTitle"
		source="modifySource"
		:description="blog.blogDescription"
		:image="blog.blogImg"
		:twitter="true"
		:google="true"
	></Share>
</templete>

Props 参数列表

prop	作用	默认值	类型
url	分享出去的网页链接	location.href	String
source	来源	空	String
origin	网站地址	location.orgin	String
title	分享标题	document.title	String
description	分享描述	空	String
image	图片url	空	String
QQ	是否显示QQ的分享图标	true	Boolean
weibo	是否显示新浪微博的分享图标	true	Boolean
weChat	是否显示微信的分享图标	true	Boolean
douban	是否显示豆瓣的分享图标	false	Boolean
QZone	是否显示QQ空间的分享图标	true	Boolean
linkedin	是否显示领英的分享图标	false	Boolean
diandian	是否显示点点的分享图标	false	Boolean
facebook	是否显示脸书的分享图标	false	Boolean
twitter	是否显示推特的分享图标	false	Boolean
google	是否显示Google+的分享图标	false	Boolean

vue3-social-share's Issues

dev正常，build就报错

代码如下：

<template>
  <div class="affix-container">
    <Share twitter douban linkedin :QZone="false"></Share>
  </div>
</template>

<script setup lang="ts">
import {Share} from 'vue3-social-share';
import 'vue3-social-share/lib/index.css'
</script>
<style lang="scss">
.affix-container {
  background-color: var(--c-bg, #fff);
  border-radius: 20px;
  position: fixed;
  bottom: 4rem;
  right: 80px;
  width: auto;
  z-index: 100;
}

.wechat-qrcode .help {
  display: none;
}

.wechat-qrcode h4 {
  background-color: #ffffff00 !important;
}
</style>

报错如下

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'E:\code\wtkj\docfly2you\node_modules\vue3-social-share\' imported from E:\code\wtkj\docfly2you\docs\.vuepress\.temp\.server\assets\ShareLink.0d7b8c5d.js
    at new NodeError (node:internal/errors:387:5)
    at legacyMainResolve (node:internal/modules/esm/resolve:341:9)
    at packageResolve (node:internal/modules/esm/resolve:938:14)
    at moduleResolve (node:internal/modules/esm/resolve:1000:20)
    at defaultResolve (node:internal/modules/esm/resolve:1214:11)
    at nextResolve (node:internal/modules/esm/loader:165:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:844:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:431:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36)

Facebook sharing is not working

when I tried to share with facebook:

Sorry, something went wrong.

We're working on getting this fixed as soon as we can.

Go back
Meta © 2024 · Help

with X (twitter) apparently is working perfectly.

google跳转到是一个网页不是分享页

如题，会跳转到这个页面

微信不可用

微信分享不可用，也不报错