vue社交软件分享

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代码如下:

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,效果如下:

11.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。