关于vue.js: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代码如下:

<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.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。