Vue, Tailwind 및 Laravel을 사용하여 재사용 및 애니메이션 드롭다운 만들기

여러분 👋 안녕하세요.

재사용 가능한 구성 요소가 개발자의 삶을 더 쉽게 만드는 주요 키 중 하나라는 데는 의심의 여지가 없습니다. 코드를 우아하고 섹시하게 만들 뿐만 아니라 여러 프로젝트에서 사용할 수 있으며 약간의 조정과 짜잔! 쉽게 다른 버전의 구성 요소를 갖게 됩니다. 이 기사에서는 구성 API 스타일의 Tailwind CSS를 사용하고 Laravel 9 프로젝트에서 가져온 Vue JS 3 드롭다운 구성 요소를 만드는 데 도움을 드리겠습니다. 우리의 구성 요소는 재사용 가능하고 동적이며 애니메이션 효과도 있을 것입니다.

우리가 무엇을 만들 것인지 한 눈에 확인하세요 👇 :

이보다 더 멋지게 스타일링할 수 있을 거라 확신해요. 다양한 선택지를 보여드리고 싶었습니다.

코드 👇의 또 다른 정점:

<Dropdown title="Users Dropdown">
  <Dropdowncontent>
    @foreach ($users as $user)
    <Dropdownitems item="{{ $user->name }}" 
                   href="/users/{{ $user->id }}">
    </Dropdownitems>
    @endforeach
  </Dropdowncontent>
</Dropdown>

시작하기 전에 질문이 있는 경우 손을 들어주세요.

🙋‍♂️ '재사용 가능'이라는 말을 계속 하는데 그게 무슨 뜻인가요?

재사용 가능한 구성 요소는 응용 프로그램의 다양한 부분에서 사용할 수 있는 구성 요소입니다. 예를 들어, 오늘 드롭다운을 구축하면 코드를 복제하지 않고도 웹 앱에서 원하는 만큼 사용할 수 있습니다.

내용의 테이블

1- Prerequisites:

2- Allow Tailwind to read Vue files

3- Create a general Dropdown.vue component

4- Create component parts

5- Slice Dropdown.vue

6- Provide/Inject

7- Pass the data from Blade to Vue

8- Adding animation and styles

9- Extracting UsersDropdown blade component

1- 전제 조건:

I'm expecting that you have very basic knowledge of Vue composition API, Tailwind CSS and Laravel. If you don't, just come along for the ride and follow each step carefully and I guarantee you'll be able to do it by yourself by the time you finish this one.

I will build the reusable component from scratch continuing on using the same REPO 이전 기사에서 만든 것입니다.

내 리포지토리 없이 코드를 작성하려면 Laravel, Tailwind 및 Vue Js 3을 설치하세요. 또한 users 테이블 등으로 데이터베이스를 만들고 테이블을 반복할 때 연결합니다. 방법에 대한 지침은 에 있습니다.

명령을 실행 중인지 확인하십시오 npm run watch 항상.

2- Tailwind가 Vue 파일을 읽도록 허용:

Head to tailwind.config.js and within the content array, be specific about your Vue files path.

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
    "./resources/js/components/*.vue",
    "./resources/js/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Insure npm run watch is running in the terminal.

3- 일반 Dropdown.vue 구성 요소를 만듭니다.

Head to resources/js/components and create new file called Dropdown.vue .
Within this file just build a normal drop-down component without looping over any data in database, just a toggle with showUsers function and some tailwind.
Dropdown.vue :

<template>
  <div v-click-outside="onClickOutside" @click="showUsers">
    <!-- toggler -->

    <button
      class="flex max-h-52 w-full overflow-auto py-2 pl-3 pr-9 
             text-sm font-semibold lg:inline-flex lg:w-48">
      Users
    </button>

    <!-- Content Container -->

    <div v-show="usersToggle" class="mt-2 w-full rounded-lg bg- 
                                     blue-100 py-2">
      <!-- Drop-down Items -->

      <a href="#" class="block text-sm my-1 mx-1"> 
           Random user name
      </a>
    </div>
  </div>
</template>

<script>
import vClickOutside from "click-outside-vue3";
import { ref } from "vue";
export default {
    name: "Dropdown",
    directives: {
        clickOutside: vClickOutside.directive,
    },
    setup() {
        const usersToggle = ref(false);

        const showUsers = () => {
            usersToggle.value = !usersToggle.value;
        };

        const onClickOutside = (event) => {
            usersToggle.value = false;
        };

        return {
            usersToggle,
            showUsers,
            onClickOutside,
        };
    },
};
</script>

Import your component in resources/js/app.js .

require("./bootstrap");

import { createApp } from "vue";
import Dropdown from "./components/Dropdown";
import vClickOutside from "click-outside-vue3";

createApp({
  components: {
    Dropdown,
  },
})
  .use(vClickOutside)
  .mount("#app");

Just a reminder that the vClickOutside is an npm package we used in the previous tutorial to close the drop-down when we click anywhere on the screen.
With nothing else, if you run the command php artisan serve in your Laravel's main directory you will see a functional ugly drop-down 🍾 But don't worry, we will make it prettier later.

4- 구성 요소 만들기:

Now we're going to slice our component as we need 3 parts. One for the toggler, one for the content container and one for the drop-down items. But first we must create and import them.

Head to resources/js/components/ and create the other two files Dropdowncontent.vue and Dropdownitems.vue .
Just make them contain <template> and <script> tags and leave them empty for now.
Import them in resources/js/app.js like we did with the first one.
resources/js/app.js :

import { createApp } from "vue";
import Dropdown from "./components/Dropdown";
import Dropdowncontent from "./components/Dropdowncontent";
import Dropdownitems from "./components/Dropdownitems";
import vClickOutside from "click-outside-vue3";

createApp({
  components: {
    Dropdown,
    Dropdowncontent,
    Dropdownitems,
  },
})
  .use(vClickOutside)
  .mount("#app");

5- 슬라이스 Dropdown.vue :

Head to resources/js/components/Dropdown.vue and copy the div the contains the link and leave in it's place <slot /> tag and wrap the botton with <slot name="toggler"></slot> tags.
Head to resources/js/components/Dropdowncontent.vue and paste the div in the template. Then copy the link inside the div from Dropdowncontent.vue to Dropdownitems.vue and leave in it's place <slot /> tag as well.
Your components should look like this:
Dropdown.vue :

<template>
  <div v-click-outside="onClickOutside" @click="showUsers">
    <!-- toggler -->

    <slot name="toggler">

      <button
        class="flex max-h-52 w-full overflow-auto py-2 pl-3 pr-9 
               text-sm font-semibold lg:inline-flex lg:w-48">
        Users
      </button>

    </slot>

    <!-- Content Container -->

    <slot />

  </div>
</template>

Dropdowncontent.vue :

<template>
  <div v-show="usersToggle" class="mt-1 w-full rounded-xl bg-blue- 
                                   100 py-2">

    <slot />

  </div>
</template>

<script>
export default {
    name: "Dropdowncontent",
};
</script>

Dropdownitems.vue :

<template>
  <a href="#" class="block text-sm my-1 mx-1"> A user name </a>
</template>

<script>
export default {
    name: "Dropdownitems",
};
</script>

Head to welcome.blade.php and let's break it down in the body.
welcome.blade.php :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>dropdown</title>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet" />
    <script src="{{ asset('js/app.js') }}" defer></script>
  </head>

  <body>
    <main class="max-w-6xl mx-auto mt-6 lg:mt-20 space-y-6" 
          id="app">
      <div class="max-w-xl mx-auto mt-10 text-center">
        <div class="space-y-2 lg:space-y-0 lg:space-x-4 mt-8">
          <div
            class="relative lg:inline-flex items-center bg-blue- 
                   100 rounded-xl">

            <Dropdown>

              <Dropdowncontent>

                <Dropdownitems></Dropdownitems>

              </Dropdowncontent>

            </Dropdown>

          </div>
        </div>
      </div>
    </main>
  </body>
</html>

Now if you check it on browser, you will see the same thing but the toggler won't work. You might be wondering about how the heck are we going to pass usersToggle value from Dropdown.vue to Dropdowncontent.vue and really it's pretty simply, we're going to use Vue's provide/inject.

6- 제공/주사:

Head to Dropdown.vue and import provide from vue, use it in the setup.
Dropdown.vue :

<script>
import vClickOutside from "click-outside-vue3";
import { provide, ref } from "vue";
export default {
    name: "Dropdown",
    directives: {
        clickOutside: vClickOutside.directive,
    },
    setup() {
        const usersToggle = ref(false);

        const showUsers = () => {
            usersToggle.value = !usersToggle.value;
        };

        const onClickOutside = (event) => {
            usersToggle.value = false;
        };

        provide("usersToggle", usersToggle);

        return {
            usersToggle,
            showUsers,
            onClickOutside,
        };
    },
};
</script>

Head to Dropdowncontent.vue and import inject, use it and return the value.
Dropdowncontent.vue :

<script>
import { inject } from "vue";
export default {
    name: "Dropdowncontent",

    setup() {
        const usersToggle = inject("usersToggle");

        return {
            usersToggle,
        };
    },
};
</script>

And just like that, our drop-down is working again.

7- Blade에서 Vue로 데이터 전달:

To make this component more reusable and dynamic, let's head to Dropdown.vue and instead of hard coding the word 'Users' leave instead {{ title }} and accept title as a prop in the script.
Dropdown.vue :

<template>
  <div v-click-outside="onClickOutside" @click="showUsers">
    <!-- toggler -->

    <button
      class="flex max-h-52 w-full overflow-auto py-2 pl-3 pr-9 
             text-sm font-semibold lg:inline-flex lg:w-48">

      {{ title }}

    </button>

    <!-- Content Container -->

    <slot />

  </div>
</template>

<script>
import vClickOutside from "click-outside-vue3";
import { provide, ref } from "vue";
export default {
    name: "Dropdown",
    props: ["title"],
    directives: {
        clickOutside: vClickOutside.directive,
    },
    setup() {
        const usersToggle = ref(false);

        const showUsers = () => {
            usersToggle.value = !usersToggle.value;
        };

        const onClickOutside = (event) => {
            usersToggle.value = false;
        };

        provide("usersToggle", usersToggle);

        return {
            usersToggle,
            showUsers,
            onClickOutside,
        };
    },
};
</script>

Head to Dropdownitems.vue and do the same. Remove 'A user name' and leave instead {{ itemName }} and accept it as a prop .
Dropdownitems.vue :

<template>
  <a href="#" class="block text-sm my-1 mx-1"> {{ item }} </a>
</template>

<script>
export default {
    name: "Dropdownitems",
    props: ["item"],
};
</script>

Head to welcome.blade.php and pass on the values.
welcome.blade.php :

<Dropdown title="Users Dropdown">

  <Dropdowncontent>

    <Dropdownitems item="Testing Items" href="#" />

  </Dropdowncontent>

</Dropdown>

Use loop to loop over all users in database and echo out their names.

<Dropdown title="Users Dropdown">

  <Dropdowncontent>

    @foreach ($users as $user)
    <Dropdownitems item="{{ $user->name }}" 
                   href="/users/{{ $user->id }}">
    </Dropdownitems>
    @endforeach

  </Dropdowncontent>

</Dropdown>

And there you go 🚀 This is a complete dynamic and reusable drop-down component. You can even add to classes by passing them from blade just like we did with title, item name and href.

8- 애니메이션 및 스타일 추가:

You can get SVG website Dropdown.vue의 버튼에 추가하세요. .

usersToggle 사실이다.

또한 Tailwind CSS 스타일을 약간 변경했습니다.

Dropdown.vue :

<template>
  <div class="relative" v-click-outside="onClickOutside" @click="showUsers">
    <slot name="toggler">
      <button
        class="text-white bg-gradient-to-r from-purple-600 to- 
               blue-500 rounded-xl flex max-h-52 w-full overflow- 
               auto py-2 pl-3 pr-9 text-sm font-semibold 
               lg:inline-flex lg:w-52">
        {{ title }}
        <svg
          class="absolute"
          :class="usersToggle
? '-rotate-90 transform transition duration-500 ease-in-out'
: 'rotate-90 transform transition duration-500 ease-in-out'"
          style="right: 12px"
          width="22"
          height="22"
          viewBox="0 0 22 22">
          <g fill="none" fill-rule="evenodd">
            <path
              stroke="#000"
              stroke-opacity=".012"
              stroke-width=".5"
              d="M21 1v20.16H.84V1z"
            ></path>
            <path
              fill="#222"
              d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z"
            ></path>
          </g>
        </svg>
      </button>
    </slot>

    <slot />
  </div>
</template>

Vue의 <transition> 태그를 tailwind CSS 클래스와 결합하여 드롭다운에 대한 부드러운 효과를 만듭니다.

Dropdwoncontent.vue :

<template>
  <transition
    :duration="1000"
    enter-active-class="transform transition duration-300 ease- 
    custom"
    enter-class="-translate-y-1/2 scale-y-0 opacity-0"
    enter-to-class="translate-y-0 scale-y-100 opacity-100"
    leave-active-class="transform transition duration-300 ease- 
    custom"
    leave-class="translate-y-0 scale-y-100 opacity-100"
    leave-to-class="-translate-y-1/2 scale-y-0 opacity-0">
    <div
      v-show="usersToggle"
      class="absolute left-0 right-0 z-50 mt-2 w-full rounded-lg 
             bg-gradient-to-r from-purple-600 to-blue-500 py-1 px- 
             3 text-left text-sm font-semibold text-white 
             transition duration-300 py-2">
      <slot />
    </div>
  </transition>
</template>

Dropdownitems.vue :

<template>
  <a
    href=""
    class="px-1 py-1 my-1 rounded-lg block hover:bg-gradient-to-bl 
           focus:bg-gradient-to-bl focus:ring-4 focus:ring-blue- 
           300 dark:focus:ring-blue-800">

    <slot>{{ item }}</slot>

  </a>
</template>

9- UsersDropdown 블레이드 구성 요소 추출:

This is not necessary as the code still looks great but we can extract a blade component for it and.
Create new folder named components in resources/views and create inside it a new file named users-dropdown.blade.php .
Cut your drop-down code and paste it inside, leave in it's place <x-users-dropdown /> .
That will leave us with only this code in our welcome.blade.php:


          <!-- Only this -->

          <x-users-dropdown />

Congratulations 🥳 Now you have a Vue animated, dynamic, reusable and colorful drop-down component inside a blade component with a very elegant code and cool Tailwind styles.

That's it for this tutorial and I hope you enjoyed reading it as I made huge effort due to the article being deleted and I had to rewrite it again. If you liked it please leave a reaction and if you have any questions leave it below or send me a DM on directly.

Have a great day and happy coding 👋

Reference

이 문제에 관하여(Vue, Tailwind 및 Laravel을 사용하여 재사용 및 애니메이션 드롭다운 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/moose_said/make-reusable-and-animated-drop-down-with-vue-tailwind-and-laravel-4fp3

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)