vue分享到推特脸书2（总结）

这个好像也没啥好讲的，虽然找了好久才解决他，但是涉及到的知识点其实没多少，具体思路可以看我上一篇文章
源码：这是后期做的vue项目分享部分的源代码

<template>
  <div class="shareItem" @click.stop="closeAlert">
    <div class="share_box" @click.stop>
      <div class="ul_share">
        <!-- 分享addthis -->
        <!-- <div class="addthis_inline_share_toolbox"> 

        </div> -->
        <div class="li_share">
          <img src="../../static/icon/line@2x.png" alt />
          <p>Line</p>
        </div>

        <div class="li_share" @click="shareTwitter">
          <img src="../../static/icon/Twitter@2x.png" alt />
          <p>Twitter</p>
        </div>
        <div class="li_share">
          <img src="../../static/icon/Instagram@2x.png" alt />
          <p>Instagram</p>
        </div>
        <div class="li_share">
          <img src="../../static/icon/Messenger@2x.png" alt />
          <p>Messenger</p>
        </div>
        <div class="li_share" @click="shareFacebook">
          <img src="../../static/icon/Facebook@2x.png" alt />
          <p>Facebook</p>
        </div>
        <div class="li_share">
          <img src="../../static/icon/SMS@2x.png" alt />
          <p>SMS</p>
        </div>
        <div class="li_share">
          <img src="../../static/icon/Copy Link@2x.png" alt />
          <p>Copy Link</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      share_id: '',
      share_url: "www.horamite.com",
      share_title: "horamite",
      share_img: "",
    };
  },
  components: {},
  props: {},
  watch: {},
  methods: {
    // 关闭分享窗口
    closeAlert() {
      this.$emit("closeAlert", false);
    },
    // 分享到脸书
    shareFacebook() {
      function popupwindow(url, title) {
        return window.open(
          "http://www.facebook.com/sharer.php?u=" +
            encodeURIComponent(url),
            //  +
            // +"&t=" +
            // encodeURIComponent(title),
          "_blank",
          "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350"
        );
      }
      popupwindow(this.share_url, this.share_title);
    },
    // 分享到推特
    shareTwitter() {
      function popupwindow(url, title) {
        return window.open(
          "https://twitter.com/intent/tweet?url=" +
            encodeURIComponent(url) +
            "&text=" +
            encodeURIComponent(title),
          "_blank",
          "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350"
        );
      }
      popupwindow(this.share_url, this.share_title);
    },
  },
  created() {
    // this.share_url = document.location.href
    // console.log('路由尾', this.$route.query.id);
    this.share_id = this.$route.query.id
    // 有id,产品详情
    if (this.share_id) {
      localStorage.removeItem('share')
      this.share_url = document.location.href
      this.share_title = localStorage.getItem('share_title')
      // alert(this.share_url)
    } else {
      // 卡片状态点击的,暂时就标题和链接，以后再优化
      this.share_url = JSON.parse(localStorage.getItem('share')).share_url
      this.share_title = JSON.parse(localStorage.getItem('share')).title
      // alert(this.share_url)
    }
    // alert(this.share_url)
  },
};
</script>

<style lang="less">
.shareItem {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  .share_box {
    width: 394px;
    height: 211px;
    background: rgba(246, 246, 246, 1);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
    .ul_share {
      padding: 25px 29px;
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      .addthis_inline_share_toolbox{
        width: 100%;
        height: 100%;
      }
      .li_share {
        margin: 0 !important;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 20%;
        cursor: pointer;
        img {
          width: 48px;
          height: 48px;
        }
        p {
          padding: 12px 0;
          width: 100%;
          font-size: 10px;
          font-family: Ronda;
          font-weight: 400;
          line-height: 12px;
          color: rgba(113, 113, 113, 1);
          text-align: center;
        }
      }
    }
  }
}
</style>