vue3-web-share
v0.0.2
Published
vue3分享组件
Downloads
5
Readme
vue3-web-share
快速开始
安装
npm i vue3-web-share -S
引入
全局引入,在 main.js 中
import Vue3WebShare from "vue3-web-share";
import "vue3-web-share/lib/index.css";
或按组件单个引用,在.vue
文件中
<script>
import { Vue3WebShare } from "vue3-web-share";
import "vue3-web-share/lib/index.css";
export default {
name: "viewName",
component: {
Vue3WebShare,
},
};
</script>
使用
<templete>
<vue3-web-share></vue3-web-share>
</templete>
或带上参数
<templete>
<vue3-web-share
:url="baseUrl+blog.blogId"
:title="blog.blogTitle"
source="modifySource"
:description="blog.blogDescription"
:image="blog.blogImg"
:twitter="true"
:google="true"
></vue3-web-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 |