4/23 复制链接、 微信扫码分享 、 微博，qq及空间的分享组件

实现点击复制链接功能

使用插件vue-clipboard2 实现剪切板的功能

1.安装
npm install --save vue-clipboard2

2.在main.js中引入

import VueClipboard from "vue-clipboard2";
Vue.use(VueClipboard);

3.应用
html

 <a  class ="shareicon" v-clipboard:copy="href" v-clipboard:success="onCopy" v-clipboard:error="onCopyError" >
      <img src="../assets/link.svg"/>
 </a>

script

export default {
  computed:{
    href(){
      if (typeof window !== 'undefined') {
        return  window.location.href
      }
    }
  },
  methods:{
    onCopy(){
      alert("复制成功")
    },
    onCopyError(){
      alert("复制失败")
    }
  }
}

实现微信扫码分享及二维码下载

1.应用

<template>
 <div>
  <div class="hello">
     <!-- 复制链接 -->
    <a  class ="shareicon" v-clipboard:copy="href" v-clipboard:success="onCopy" v-clipboard:error="onCopyError" >
      <img src="../assets/link.svg"/>
    </a>
    <!-- 微博分享 -->
    <a  class ="shareicon" @click = "shareTo('sina')" >
      <img src="../assets/wbicon.jpeg" >
    </a>
      <!-- 微信分享 -->
    <a  class ="shareicon" @click = "shareTo('wechat')" >
      <img src="../assets/wxicon.jpg" >
    </a>
  </div>

     <ShareCode :isAlert="isAlert" :url="href" @alertBack="alertBackFn" ></ShareCode>
  </div>
</template>
<script>
import ShareCode from "./ShareCode.vue"
export default {
  name: 'HelloWorld',
  components:{ShareCode},
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      title:"微博分享时候的title",
      isAlert:false
    }
  },
  computed:{
    href(){
      if (typeof window !== 'undefined') {
        return  window.location.href
      }
    }
  },
  methods:{
    onCopy(){
      alert("复制成功")
    },
    onCopyError(){
      alert("复制失败")
    },
    shareTo(type){
      if(type ==="sina"){
        let flink = ""
        if(type=='sina' && typeof window !== 'undefined'){
          window.open('http://service.weibo.com/share/share.php?url='+document.location.href+'?sharesource=weibo&title='+this.title+'&pic='+flink+'&appkey=2706825840');
        }
      }
      if(type == "wechat"){
        this.isAlert = true;
      }
     
    },
    alertBackFn(){
      this.isAlert = false
    }
  }
}
</script>
<style scoped >
.hello{
  width:200px;
  height:100px;
  position: absolute;
  overflow: auto;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: red;
}
.shareicon{
  width:22px;
  height:22px;
  margin: 0 5px!important;
  cursor:pointer;
}
.shareicon img{
  width:25px;
  height: 25px;
}
</style>

二维码组件ShareCode

点击微信icon后弹出的遮罩层，可以生成二维码及下载二维码

1.安装 vue-qr二维码插件

npm install vue-qr --save

2.应用

<template>
  <div >
    <div id="mask"   v-if="isAlert"> 
      <div style="width:300px ;background:white; position:relative; padding:30px;">
        <p style="color:black ;text-align:center; width:100%"> 微信分享二维码 </p>
        <p  @click="alertBackFn"  class=" close">
          <svg style="width:24px;height:24px;" viewBox="0 0 24 24">
              <path fill="currentColor" d="M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z" />
          </svg>
        </p>
        <div>
          <vue-qr ref="Qrcode"  :text="downloadData.url"   colorDark="#f67b29"  :margin="10" colorLight="#fff" :logoSrc="downloadData.icon " :logoScale="0.2"  :size="200" ></vue-qr>  
          <p>
              <!-- 下载二维码图片 -->
              <a  :href="exportLink"   @click="downloadImg"  :download="downloadFilename">下载二维码</a>
          </p>
         
        </div>
        
      </div>
    </div>
  </div>
</template>
<script>
import vueQr from 'vue-qr'// 二维码组件
export default {
  components: {vueQr },
  props:['url',"isAlert"],
  data() {
    return {
      downloadData: {
        url: 'https://cn.vuejs.org/',
        icon: require('../assets/logo.png'),
      },
      exportLink:"",
      downloadFilename:""
    };
  },
  methods: {
    alertBackFn(){
      this.$emit('alertBack');
    },
   downloadImg () {
      let Qrcode = this.$refs.Qrcode
      this.exportLink = Qrcode.$el.currentSrc
      this.downloadFilename = '二维码'
    }
  },
};
</script>
<style >
  #mask{
    display:flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top:0;
    left:0;
    z-index:50;
    width:100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
  }
  .close{
    position:absolute ;
    right:20px;
    top:0px;
    color:rgba(59,130,246,0.5);   
  }
  .close :hover{
    color:rgba(59,130,246); 
  }
</style>

vue-qr 常用属性介绍

• text 二维码内容
• size 二维码宽高大小，因为是正方形，所以设一个参数即可
• margin 默认边距20px，
• colorDark 实点的颜色，注意和colorLight一起设置才有效
• colorLight 空白的颜色，注意和colorDark一起设置才有效
• bgSrc 嵌入背景图地址
• logoSrc 二维码中间的图片
• logoScale 中间图的尺寸，不可以设太大的值否则会导致扫码失败
• dotScale 小点点的大小，不建议设置

微博分享的参数

链接:

• http://service.weibo.com/share/share.php?title=‘分享标题’&url=‘分享链接’…等参数

其他参数：

• count： 表示是否显示当前页面被分享数量(1显示)(可选，允许为空)

• url, ： 将页面地址转成短域名，并显示在内容文字后面。(可选，允许为空)

• appkey ： 用于发布微博的来源显示，为空则分享的内容来源会显示来自互联网。(可选，允许为空)

• title : 分享时所示的文字内容，为空则自动抓取分享页面的title值(可选，允许为空)

• pic: 自定义图片地址，作为微博配图(可选，允许为空)

• ralateUid: 转发时会@相关的微博账号(可选，允许为空)

• language: 语言设置(zh_cn|zh_tw)(可选)