vue 点击文字按钮复制相应内容与复制并打开链接

复制链接并打开链接预览

html：

<div class="exchange-code-cont flex-end">
//需要复制的值
        <div class="exchange-code-text">{{ digitalCollectionCode }}</div>
//复制点击的按钮(src为复制图标地址)
        <span @click="copyCode(digitalCollectionCode)" >复制并打开链接</span>
      
      </div>

js:

 

  data() {
    return {
      digitalCollectionCode: 'https://blog.csdn.net/leng0920/article/details/105628352',
    };
  },

 

复制文本内容

HTML:

<div class="exchange-code-cont flex-end">
//需要复制的值
        <div class="exchange-code-text">{{ digitalCollectionCode }}</div>
//复制点击的按钮(src为复制图标地址)
        <span @click="copyCode(digitalCollectionCode)" >复制内容</span>
      
      </div>

 js:

 digitalCollectionCode为需要复制的值，也可以是变量

  data() {
    return {
      digitalCollectionCode: '123456',
    };
  },

  methods: {
    copyCode(digitalCollectionCode) {
        const input = document.createElement("input");
	      document.body.appendChild(input);
	      input.setAttribute("value", digitalCollectionCode);
	      input.select();
	      if (document.execCommand("copy")) {
	        document.execCommand("copy");
	      }
	      document.body.removeChild(input);
        this.$message({
            message: "复制成功",
            type: "success",
          });//饿了么框架提示语
          setTimeout(()=>{
            window.open(digitalCollectionCode,'_blank');
          },400)
    },
  },

  methods: {
    copyCode(digitalCollectionCode) {
      var aux = document.createElement('input');
      aux.setAttribute('value', digitalCollectionCode);
      document.body.appendChild(aux);
      aux.select();
      document.execCommand('copy');
      document.body.removeChild(aux);
      this.$notify({ type: 'success', message: '复制成功' });//引入vant框架可用
    },
  },