[Vue.js] 버튼으로 복사 및 붙여넣기

 

 

 

 

 

📄 HTML

<div class="search-wrap">
  <div class="search-box">
    <input
      ref="target"
      v-model="keyword"
      placeholder="복사할 텍스트를 입력하세요."
    />
    <span class="copy" @click="copyKeyword">📋️️</span>
  </div>
  <div class="search-box">
    <input
      ref="pasteTarget"
      v-model="pastedKeyword"
      placeholder="오른쪽 버튼으로 붙여넣어보세요."
    />
    <span class="copy" @click="pasteKeyword">📋️️</span>
  </div>
</div>

 

 

📄 JS

<script>
export default {
  data() {
    return {
      keyword: "버튼을 눌러보세요.",
      pastedKeyword: "",
    };
  },
  methods: {
    // 복사하기
    copyKeyword() {
      this.$refs.target.select();
      document.execCommand("copy");
    },
    // 붙여넣기
    pasteKeyword() {
      navigator.clipboard.readText().then((text) => {
        navigator.clipboard.writeText(text);
        this.pastedKeyword = text;
      });
    },
  },
};
</script>

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.