【Vue】12.vue中实现点击复制及打开手机微信APP的功能

最近在做vue项目的时候遇到了这样的一个需求，点击复制微信昵称并打开手机微信的功能，在网上查了一下，vue有一个第三方的插件，考虑到各个浏览器剪切板的兼容性问题，就直接引用了这个插件，打开微信就通过url协议weixin://

可参考vue-clipboard2

<template>
    <div class="landing002-wrapper">
      <div class="landing002-content">
        <div class="landing002-content-description">
          <img class="img-left" src="../../images/landing002/landing002_arrow_down.png"/>
          <span>点此复制小程序名并进入微信</span>
          <img class="img-right" src="../../images/landing002/landing002_arrow_down.png"/>
        </div>
        <div class="landing002-content-word" @click="copyToBoard">点击进入微信</div>
        <div class="landing002-word">一键帮你找出TA的所有问题</div>
      </div>
    </div>
</template>

<script>
  import CONSTANT from '../../common/js/constant';

    export default {
      data() {
        return {
          name: 'Landing002',
          message: CONSTANT.WX_CHAT_NICKNAME,
        };
      },
      methods: {
        copyToBoard() {
          this.$copyText(this.message).then((e) => {
            console.log(this.message);
            console.log(e);
            this.$createToast({
              txt: '微信昵称已复制',
              type: 'txt',
            }).show();
            setTimeout(() => {
              this.goWxchat();
            }, 1000);
          }, (e) => {
            console.log(e);
          });
        },
        goWxchat() {
          window.location.href = 'weixin://';
        },
      },
    };
</script>