Vue + element ui 实现复制和打开链接功能

Vue + element ui 实现复制和打开链接功能

<template>
  <div class="demo">
  	<div class="demo_input">
  	  <el-input v-model="link">el-input>
  	div>
  	<div class="demo_button">
  	   <el-button type="primary" @click="copyUrl">复制链接el-button>
       <el-button @click="openUrl(link)">打开链接el-button>
    div>
  div>
template>

<script>
export default {
     
	data() {
     
		return{
     
			link: 'https://blog.csdn.net/weixin_43244049/article/details/105578800', // 输入框默认链接
		}
	},
	methods: {
     
		// 复制链接
	    copyUrl() {
     
	      const input = document.createElement("input");
	      document.body.appendChild(input);
	      input.setAttribute("value", this.link);
	      input.select();
	      if (document.execCommand("copy")) {
     
	        document.execCommand("copy");
	      }
	      document.body.removeChild(input);
	      this.$zero.ToastSuccess('已复制至系统剪切板');
	    },
	    // 新标签页打开链接
	    openUrl(url) {
     
	      window.open(url, "_blank");
	    },
	}
}
</script>