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

约定不等于承诺〃 2022-03-22 06:58 325阅读 0赞

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

可参考[vue-clipboard2][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70][]

<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>

[vue-clipboard2]: https://www.npmjs.com/package/vue-clipboard2
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JlbmJlbjUxMzYyNA_size_16_color_FFFFFF_t_70]: /images/20220322/4bde643c064345e299925fa074ca5aa4.png