Vue를 사용하여 공유 가능한 링크

안녕하세요 독자 여러분,

오늘의 블로그 게시물에서는 vue를 사용하여 공유 가능한 링크를 만드는 방법을 살펴보겠습니다.

다른 사용자에게 링크를 공유해야 하는 경우가 있습니다.

이를 위해 텍스트를 복사하는 데 사용되는 자바스크립트 클립보드의 도움을 받습니다.

게시물 예시를 사용하여 공유 가능한 링크를 만들어 보겠습니다.

먼저 새 vue 구성 요소를 만들고 이름을 SharableLinkComponent.vue로 지정하고 다음 코드를 추가합니다.

<template>
  <div>
      <h3 class="my-3">Example to Copy Sharable Link </h3>
        <ul v-for="post in posts" :key="post.id">
            <div class="border shadow-lg border-blue-500 w-1/3 my-2 mx-auto p-4 rounded">
                <li class="my-2">{{ post.title }}</li>
                <li class="my-2">{{ post.body }}</li>
                <li class="my-2"> <a @click="copyLink(post.id)" href="#" class="border border-green-400 bg-green-200 rounded p-1">http://www.ex.com/{{ post.slug }}</a>
                <br>
                <input type="hidden" :value="`http://www.ex.com/${ post.slug }`" :id="`copySharableLink-${post.id}`">

                </li>
            </div>
        </ul>
      <input type="text" v-model="shareLink" id="">
      <button></button>
  </div>
</template>

<script>
export default {
    data () {
        return {
            posts: [
                {
                    id: 1,
                    title: 'Post 1',
                    body: 'my first post',
                    slug: 'post-1'
                },
                {
                    id: 2,
                    title: 'Post 2',
                    body: 'my second post',
                    slug: 'post-2'
                },
                {
                    id: 3,
                    title: 'Post 3',
                    body: 'my third post',
                    slug: 'post-3'
                },
                {
                    id: 4,
                    title: 'Post 4',
                    body: 'my fourth post',
                    slug: 'post-4'
                },
            ]
        }
    },
    methods: {
        copyLink(id) {
            let copyText = document.querySelector(`#copySharableLink-${id}`);
            // copyText.setAttribute('type', 'text');
            copyText.select();
            // document.execCommand('copy'); // function is deprecated
            navigator.clipboard.writeText(copyText.value);
            // copyText.setAttribute('type', 'hidden');
        }
    }
}
</script>

<style>

</style>

아래 샌드박스에서 작업하는 것도 참조할 수 있습니다.



행복한 코딩 .. ❤️
감사합니다... 🦄