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