InertiaJs 링크 구성 요소

이 자습서에서는 앱의 모든 InertiaJs 링크의 디자인 및 표시를 담당할 Vue 구성 요소를 만듭니다. 이 구성 요소 내에서 모든 링크의 CSS를 변경할 수 있습니다. 또한 다양한 유형의 링크 표시를 지원합니다. 다음은 구성 요소의 샘플 출력입니다.



InertiaJs에서 링크를 생성하는 동안 모든 링크를 생성하려면 <inertia-link /> 태그를 사용해야 합니다. 이렇게 하면 브라우저를 다시 로드하지 않고도 모든 링크가 열리고 SPA(Single Page Application)의 느낌을 받을 수 있습니다.

<inertial-link :href="/departments/create">Add</inertia-link>

따라서 위의 텍스트가 "추가"인 링크를 생성하고 "/departments/create"로 연결되며 클릭하면 SPA 모드에서 링크가 열립니다. 또한 InertiaJs를 사용하면 이러한 링크를 생성하기 위해 Laravel 경로를 전달할 수도 있습니다.

<inertial-link :href="route('departments.create')">Add</inertia-link>

이렇게 하면 링크가 생성됩니다. 일부 TailwindCss 클래스를 사용하여 일부 스타일을 제공할 수 있습니다.

<inertial-link 
  :href="route('departments.create')"
  classes="px-3 py-2 mr-2 rounded text-white text-sm 
font-bold whitespace-no-wrap 
bg-blue-600 hover:bg-blue-800"
>Add</inertia-link>

이렇게 하면 앵커 태그가 파란색 버튼으로 디자인되어 사용자가 마우스를 가져가면 더 어두워집니다.

그러나 앱에 이러한 링크가 여러 개 있고 모든 CSS 클래스를 반복하고 싶지 않기 때문에 논리를 구성 요소로 추출하는 것이 가장 좋습니다.

저는 모든 UI 구성 요소를 resources/js/Components 디렉토리에 보관하는 것을 선호하며 이를 AnchorLink.vue라고 부르겠습니다. Anchor Text에 slot를 사용하고 props를 사용하여 href를 전달할 것입니다.

<template>
  <inertia-link
    :href="href"
    class="px-3 py-2 mr-2 rounded text-white text-sm 
font-bold whitespace-no-wrap 
bg-blue-600 hover:bg-blue-800"
  >
    <slot />
  </inertia-link>
</template>

<script>
export default {
  props: {
    href: {
      type: String,
      required: true,
    },
  },
};
</script>

이제 이 UI 구성 요소를 Vue 구성 요소로 가져오고 이전 코드를 단순화하여 앵커 링크를 다음과 같이 표시할 수 있습니다.

<anchor-link
    :href="route('departments.create')"
>Add
</anchor-link>

이제 이AnchorLink 구성 요소를 사용하여 앱의 모든 링크를 표시할 수 있습니다. 그리고 링크에 대한 CSS 속성을 변경하려는 경우 단일 파일에서만 변경하면 됩니다.

그러나 현재 모든 링크는 파란색 버튼으로 표시됩니다. 링크가 기능 편집 또는 삭제를 가리키는 경우 다른 색상을 표시할 수도 있습니다. 이제 AnchorLink 구성 요소를 업데이트하겠습니다.

우리는 mode라는 새로운 Prop을 소개할 것이고 기본 값인 add를 줄 것입니다.

    mode: {
      type: String,
      default: "add",
    },

또한 템플릿에서 클래스bg-blue-600 hover:bg-blue-800를 이동하고 모드 값을 기반으로 계산된 다음 :classes를 사용하여 템플릿에 할당되는 계산된 속성으로 이동합니다.

<template>
  <inertia-link
    :href="href"
    class="px-3 py-2 mr-2 rounded text-white text-sm 
font-bold whitespace-no-wrap"
    :class="classes"
  >
    <slot />
  </inertia-link>
</template>

<script>
export default {
  props: {
    href: {
      type: String,
      required: true,
    },
    mode: {
      type: String,
      default: "add",
    },
  },
  computed: {
    classes() {
      if (this.mode == "add") {
        return "bg-blue-600 hover:bg-blue-800";
      }
      return "";
    },
};
</script>

이제 계산된 속성 메서드 클래스를 변경하여 편집, 삭제 및 보기와 같은 다른 모드에 대한 지원을 추가할 수 있습니다.

    classes() {
      if (this.mode == "add") {
        return "bg-blue-600 hover:bg-blue-800";
      }
      if (this.mode == "edit") {
        return "bg-yellow-600 hover:bg-yellow-800";
      }
      if (this.mode == "delete") {
        return "bg-red-600 hover:bg-red-800";
      }
      if (this.mode == "view") {
        return "bg-green-600 hover:bg-green-800";
      }
      return "";
    },

이제 AnchorLink 구성 요소를 호출하고 mode를 전달하여 다양한 종류의 링크를 표시할 수 있습니다. 어떤 모드도 전달하지 않으면 기본값인 추가가 파란색 버튼을 표시하는 데 사용됩니다.

<anchor-link
    :href="route('departments.create')"
>Add
</anchor-link>

<anchor-link
    mode="edit"
    :href="route('departments.edit', id)"
>Edit
</anchor-link>

<anchor-link
    mode="delete"
    :href="route('departments.destroy', id)"
>Delete
</anchor-link>

<anchor-link
    mode="view" 
    :href="route('departments.show', id)"
>View
</anchor-link>

위의 코드는 자습서 시작 부분에 표시된 이미지와 동일한 출력을 표시합니다. 이제 AnchorLink 구성 요소를 사용하여 앱의 모든 링크를 표시할 수 있습니다.

이 튜토리얼을 즐기셨기를 바랍니다. 비슷한 기사를 보려면 나를 따라갈 수 있습니다.