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

<template> <span @click="facebookLink(url)">  <icon name="brands/facebook" color="#3B5998" :scale="scale"></icon> </span></template><script> import objectToGetParams from '@/utils/objectToGetParams'; import 'vue-awesome/icons/brands/facebook'; import Icon from 'vue-awesome/components/Icon'; export default {  name: 'facebook',  components: {   Icon  },  methods: {   facebookLink(url) {    window.open(     `https://www.facebook.com/sharer/sharer.php` +     objectToGetParams({      u: url     }),     '__blank'    );   }  },  props: {   url: {    required: true,    type: String   },   scale: {    required: false,    type: String   }  } };</script>

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

<template> <span @click="whatsappLink(url, title)">  <icon name="brands/whatsapp-square" color="#34af23" :scale="scale"></icon> </span></template><script> import objectToGetParams from '@/utils/objectToGetParams'; import 'vue-awesome/icons/brands/whatsapp-square'; import Icon from 'vue-awesome/components/Icon'; export default {  name: 'whatsapp',  components: {   Icon  },  methods: {   whatsappLink(url, separator, title) {    window.open(     'https://api.whatsapp.com/send' +     objectToGetParams({      text: title ? title + separator + url : url     }),     '__blank'    );   }  },  components: {   Icon  },  props: {   url: {    required: true,    type: String   },   title: {    required: false,    type: String   },   scale: {    required: false,    type: String   }  },  data() {   return {    separator: ''   };  } };</script>

9.如何在父组件中应用呢?在父组件中增加如下:

<template> <div class="Chen">  <p>我是社交分享组件的应用</p>  <facebook :url="url" scale="3"></facebook>  <whats-app :url="url" scale="3"></whats-app> </div></template><script> import Facebook from '../components/Facebook.vue'; import WhatsApp from '../components/WhatsApp'; export default {  name: 'Chen',  components: {   Facebook,   WhatsApp  },  data() {   return {    url: 'https://github.com/mbj36'   }  },  created() {  },  methods: {  } }</script><style scoped></style>

10.点击facebook,成果如下:

11.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。