vue 写复制

最新推荐文章于 2024-09-09 11:08:24 发布

知命者夏洛特

最新推荐文章于 2024-09-09 11:08:24 发布

阅读量324

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_41815063/article/details/121790882

版权

该博客详细介绍了如何在Vue.js项目中实现用户信息的展示，包括头像、昵称和唯一标识（unionId）的显示。同时，它展示了如何创建一个复制按钮，使得用户可以方便地复制自己的unionId。代码片段涵盖了组件模板、数据绑定、事件监听以及使用document.execCommand方法进行文本复制的功能实现。

摘要由CSDN通过智能技术生成

<template>
  <div class='my' id="my">
    <div class="myContent">
      <div class="userInfo">
        <div class="userAvatar">
          <img v-if="userInfo.headImgUrl" :src="userInfo.headImgUrl" alt="">
        </div>
        <div class="userRight">
          <div class="userNickName van-ellipsis">
            {{userInfo.nickName}}
          </div>
          <div class="userUid">
            <div class="uid van-multi-ellipsis--l2">
              {{userInfo.unionId}}
            </div>
            <i class="copy" @click="handleCopyUid">复制</i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name:'unionIdPage',
    data() {
      return {
        userInfo: {},
        uid: '',
      }
    },
    mounted() {
      this.init()
    },
    // 方法集合
    methods: {
      init() {
        var userInfo = JSON.parse(decodeURIComponent(window.atob(sessionStorage.getItem("userInfo"))));
        this.userInfo = userInfo;
      },
      //复制
      handleCopyUid() {
        var input = document.createElement('input');
        input.style.position = "absolute";
        input.style.top = 0;
        input.style.left = 0;
        input.style.zIndex = -1;
        var parent = document.getElementById('my');
        //将input的值设置为需要复制的内容
        input.value = this.userInfo.unionId;
        //添加input标签
        parent.appendChild(input)
        //选中input标签
        input.select()
        //执行复制
        document.execCommand("Copy");
        //成功提示信息
        this.$toast({
          message: `id复制成功`,
          duration: 2000
         });
        //移除input标签
        parent.removeChild(input)
      },
    },
  }

</script>

<style lang="scss" scoped>
  .my {
    @include size(100%, 100%);
    min-height: 100vh;
    position: relative;
    .myContent {
      background: linear-gradient(180deg, #F7F7F7 0%, #E9E9E9 100%);
      padding: 40px 30px 0;

      .userInfo {
        background: #FFFFFF;
        padding: 48px 50px;
        box-shadow: 0px 2px 14px 0px rgba(86, 86, 86, 0.05);
        border-radius: 20px;
        @include flexBox(row, null, center, null);

        .userAvatar {
          @include circle(128px);
          overflow: hidden;

          img {
            @include size(100%, 100%);
          }
        }

        .userRight {
          width: 420px;
          margin-left: 40px;

          .userNickName {
            font-size: 36px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #112244;
            line-height: 50px;
            margin-bottom: 10px;
          }

          .userUid {
            font-size: 28px;
            font-weight: 400;
            color: #949BAB;
            @include flexBox(row, null, center, null);

            .uid {
              max-width: 240px;  //32vw24  40vw  750/32
              margin-right: 20px;
              word-break: break-all;
              text-align: justify;
            }

            .copy {
              @include size(72px, 35px);
              text-align: center;
              @include button(24px, 35px, #949BAB, 0, 1px solid #949BAB);
              font-weight: 300;
              border-radius: 17px;
              font-style: normal;

            }
          }
        }

      }

      .inviteBanner {
        @include size(100%, 100%);
        @include bgUrl('inviteBanner-bg.png');
        background-repeat: no-repeat;
        background-size: cover;
        @include flexBox(row, space-between, center, null);
        margin-top: 30px;
        border-radius: 20px 20px 0px 0px;
        padding: 32px 19px 23px 33px;

        .title {
          width: 362px;

          img {
            width: 100%;
          }
        }

        .inviteBtn {
          border-radius: 64px;
          font-family: PingFang-SC-Bold, PingFang-SC;
          @include button(28px, 75px, #442911, 0, none);
          @include size(260px, 75px);
          background: linear-gradient(180deg, #FFEA25 0%, #FFD010 100%);
          font-weight: bold;
          text-align: center;
        }
      }
    }

    .myDetail {
      padding: 0 10px;

      .valueClass {
        color: #B6B6B6;
        font-size: 28px;
      }

      .titleClass {
        font-size: 32px;
        font-family: PingFang-SC-Bold, PingFang-SC;
        font-weight: bold;
        color: #112244;
      }
    }
    .courseBox {
        border-radius: 20px 20px 0px 0px;
        ::v-deep .van-popup__close-icon--top-right {
          top: 47px;
          right: 55px;
        }
      }
  }

</style>