vue社交软件分享 vue.js

1.开发环境 vue
2.电脑系统 windows10专业版
3.在使用vue开发的过程中,我们可能会有这样的需求,就是分享到社交的网站和软件上,比如:分享到email/facebook/google/Linkedin/Twitter/Whatsapp等,下面我来分享一下我的经验和解决方法,希望对你有所帮助。
4.废话不多说,直接上效果图:

文章图片

5.首先是安装:

//字体库 npm i vue-awesome -S //社交分享插件 npm install vue-socialmedia-share -S

6.我在这里进行了封装,在components中添加如下:

文章图片

7.组件Facebook代码如下:

【vue社交软件分享】8.在src下新建一个utils文件夹,在这个文件夹下新建一个 objectToGetParams.js,添加代码如下:

export default function objectToGetParams(object) { return ( '?' + Object.keys(object) .filter(key => !!object[key]) .map(key => `${key}=${encodeURIComponent(object[key])}`) .join('&') ); }

9.vue组件中WhatsApp.vue代码如下:

9.如何在父组件中使用呢?在父组件中添加如下:

10.点击facebook,效果如下: