nuxtProject/pages/copyUrl.vue

<template>
  <div class="copy-url-page">
    <div class="success-body-box">
      <img :src= copyUrlImg />
      <p>请使用电脑端</p>
      <p>进行青谷在线学习SaaS系统</p>
      <p>相关操作</p>
      <span>{{copyUrlContent}}</span>
      <a @click="copyUrl">复制链接</a>
    </div>

  </div>
</template>

<script>
  export default {
    name:    'copyUrl',
    layout:  'templateB',
    data() {
      return {
        copyUrlContent:'',
        copyUrlImg:  require(`~/static/images/client/component/register-success-img.png`),
      };
    },
    head() {
      return {
        title: '该功能无法在手机端操作,请使用电脑端进行相关操作',
      };
    },
    methods: {
      copyUrl() {
        var input = document.createElement("input");   // js创建一个input输入框
        input.value = this.copyUrlContent;  // 将需要复制的文本赋值到创建的input输入框中
        document.body.appendChild(input);    // 将输入框暂时创建到实例里面
        input.select();   // 选中输入框中的内容
        document.execCommand("Copy");   // 执行复制操作
        document.body.removeChild(input); // 最后删除实例中临时创建的input输入框，完成复制操作
        this.$message({customClass:'phone-message-box',type: 'success',message: '复制成功'});
      }
    },
    created() {
      this.copyUrlContent = this.$route.query.url;
    },
  };
</script>