VUE3 개발 기본 사항: Vue.js 플러그인을 사용하여 접이식 패널 구성요소 캡슐화

VUE3 개발 기본 사항: Vue.js 플러그인을 사용하여 접이식 패널 구성 요소를 캡슐화합니다.

접이식 패널은 콘텐츠를 확장하고 축소하는 데 사용할 수 있는 일반적인 UI 구성 요소입니다. Vue.js에서는 지시문이나 구성 요소를 사용하여 아코디언 패널을 구현할 수 있습니다. 그러나 중복 구성 요소를 개발하는 것은 지루한 작업이므로 Vue.js 플러그인을 사용하여 아코디언 패널 구성 요소를 캡슐화하는 것이 더 나은 솔루션입니다.

이 글에서는 플러그인의 설치, 사용, 구성을 포함하여 Vue.js 플러그인을 사용하여 접이식 패널 구성 요소를 캡슐화하는 방법을 소개합니다. 우리는 개발 환경으로 Vue3를 사용하고 빌드 도구로 Vite를 사용합니다.

1단계: 프로젝트 생성 및 Vue.js 설치

먼저 새 Vue.js 프로젝트를 생성하고 다음 명령을 입력해야 합니다.

npm init vite-app vue3-fold-panel

이렇게 하면 새 Vite 프로젝트가 생성되고 이름이 "vue3 -fold-"로 지정됩니다. 패널".

다음으로 Vue.js를 설치해야 합니다. 다음 명령을 사용하여 설치할 수 있습니다.

npm install vue@next

설치가 완료된 후 프로젝트에 새 Vue 인스턴스를 생성할 수 있습니다.

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

2단계: 아코디언 패널 구성 요소 작성

아코디언 패널 구성 요소 패키징을 시작하기 전에 , 먼저 정의해야 합니다. src/comComponents 디렉터리에 새 폴더를 만들고 이름을 "FoldPanel"로 지정합니다. 해당 폴더에서 "FoldPanel.vue"라는 파일을 만들고 다음 코드를 작성합니다.

<template>
  <div class="fold-panel">
    <div class="fold-panel-header" @click="togglePanel"> {{ title }} </div>
    <div class="fold-panel-body" v-show="showPanel">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FoldPanel',
  data() {
    return {
      showPanel: false,
    }
  },
  props: {
    title: {
      type: String,
      required: true,
    },
  },
  methods: {
    togglePanel() {
      this.showPanel = !this.showPanel
    },
  },
}
</script>

<style scoped>
.fold-panel {
  border: 1px solid #ddd;
  margin-bottom: 10px;
}

.fold-panel-header {
  padding: 10px;
  cursor: pointer;
}

.fold-panel-body {
  padding: 10px;
}
</style>

이 구성 요소에서는 Vue3의 새로운 기능인 ""을 사용하여 구성 요소에 콘텐츠를 삽입할 수 있습니다. 아코디언 구성 요소는 제목과 내용의 두 부분으로 구성됩니다. 사용자가 제목을 클릭하면 콘텐츠 섹션이 접히거나 펼쳐질 수 있습니다.

콘텐츠 부분의 확장 또는 축소 상태를 전환하기 위해 "togglePanel"이라는 메서드를 정의합니다. 또한 콘텐츠 부분이 표시되어야 하는지 여부를 기록하는 "showPanel" 변수를 정의합니다.

3단계: 플러그인 생성 및 컴포넌트 등록

다음으로 아코디언 컴포넌트를 전역적으로 등록할 플러그인을 생성하겠습니다.

src/plugins 디렉토리에 "fold-panel.js"라는 파일을 생성하고 다음 코드를 작성하세요.

import FoldPanel from '../components/FoldPanel/FoldPanel.vue'

export default {
  install(app) {
    app.component(FoldPanel.name, FoldPanel)
  },
  FoldPanel,
}

이 플러그인에는 접이식 패널을 전역적으로 등록하는 메소드만 포함되어 있습니다. "app.comComponent" 함수를 사용하여 구성 요소를 Vue 인스턴스에 등록합니다. 또한 플러그인은 "FoldPanel"이라는 개체를 반환합니다. 이를 통해 구성 요소의 "'fold-panel'에서 가져오기 { FoldPanel }"를 사용하여 구성 요소를 가져올 수 있습니다.

4단계: Vue.js에 플러그인 설치

이제 Vue.js 애플리케이션에 플러그인을 설치할 수 있습니다. src/main.js 파일을 열고 다음 코드를 사용하여 플러그인을 설치합니다:

import { createApp } from 'vue'
import App from './App.vue'
import FoldPanelPlugin from './plugins/fold-panel'

const app = createApp(App)

app.use(FoldPanelPlugin)

app.mount('#app')

플러그인을 설치하기 위해 Vue.js 3의 새로운 API "app.use"를 사용했습니다.

5단계: 아코디언 패널 구성 요소 사용

이제 모든 Vue 구성 요소에서 아코디언 패널 구성 요소를 사용할 수 있습니다. 다음 코드를 템플릿에 삽입하기만 하면 됩니다.

<template>
  <div>
    <fold-panel title="折叠面板1">
      这是折叠面板1的内容。
    </fold-panel>

    <fold-panel title="折叠面板2">
      这是折叠面板2的内容。
    </fold-panel>
  </div>
</template>

<script>
import { FoldPanel } from 'fold-panel'

export default {
  components: {
    FoldPanel,
  },
}
</script>

이렇게 하면 페이지에 각각 제목과 콘텐츠 섹션이 있는 두 개의 아코디언 패널이 표시됩니다. 사용자가 패널 제목을 클릭하면 콘텐츠 섹션이 확장되거나 축소됩니다.

6단계: 구성 요소 구성

아코디언 패널 구성 요소는 속성을 통해 사용자 정의할 수도 있습니다. 다음은 주요 속성 중 일부입니다.

1. title: 아코디언 패널의 제목입니다.
2. isCollapsed: 접는 패널이 처음에 접혀 있는지 여부를 지정합니다. 기본값은 false(예: 확장된 상태)입니다.

<template>
  <div>
    <fold-panel title="折叠面板1" :isCollapsed="true">
      这是折叠面板1的内容。
    </fold-panel>

    <fold-panel title="折叠面板2">
      这是折叠面板2的内容。
    </fold-panel>
  </div>
</template>

이 예에서는 '패널 접기 1'이 처음에 접혀 있습니다. 초기화 중에 템플릿을 통해 이 속성을 설정할 수 있습니다.

3. showIcon: 확장/축소 아이콘 표시 여부를 지정합니다. 기본값은 true입니다.

<template>
  <div>
    <fold-panel title="折叠面板1" :showIcon="false">
      这是折叠面板1的内容。
    </fold-panel>

    <fold-panel title="折叠面板2">
      这是折叠面板2的内容。
    </fold-panel>
  </div>
</template>

이 예에서 '패널 접기 1'에는 확장/축소 아이콘이 표시되지 않습니다.

4. iconPosition: 확장/축소 아이콘의 위치를 ​​지정합니다. 기본값은 왼쪽을 의미하는 "왼쪽"입니다.

<template>
  <div>
    <fold-panel title="折叠面板1" iconPosition="right">
      这是折叠面板1的内容。
    </fold-panel>

    <fold-panel title="折叠面板2">
      这是折叠面板2的内容。
    </fold-panel>
  </div>
</template>

이 예에서는 "패널 접기 1"에 대한 확장/축소 아이콘이 오른쪽에 표시됩니다.

이 시점에서 접이식 패널 구성 요소가 포장되었습니다. Vue.js 플러그인을 사용하여 구성 요소를 캡슐화하면 중복 코드가 줄어들 뿐만 아니라 코드가 더욱 모듈화되고 확장 가능해집니다.

위 내용은 VUE3 개발 기본 사항: Vue.js 플러그인을 사용하여 접이식 패널 구성요소 캡슐화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!