首页 > 其他分享 >使用vue实现一个点击复制的功能

使用vue实现一个点击复制的功能

时间:2023-03-21 13:55:31浏览次数:28  
标签:body vue textArea textToCopy 点击 复制 document

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <button @click="copyText">复制</button>
  <input type="text" v-model="textToCopy" />
</div>
new Vue({
  el: "#app",
  data: {
    textToCopy: "这是需要复制的文本内容"
  },
  methods: {
    copyText() {
      const textArea = document.createElement("textarea");
      textArea.value = this.textToCopy;
      document.body.appendChild(textArea);
      textArea.select();
      document.execCommand("copy");
      document.body.removeChild(textArea);
      alert("已成功复制文本!");
    }
  }
});

  

新开窗口的功能

window.open("https://www.example.com", "_blank");

标签:body,vue,textArea,textToCopy,点击,复制,document
From: https://www.cnblogs.com/chenyangwang/p/17239737.html

相关文章