Asas pembangunan VUE3: Gunakan pemalam Vue.js untuk merangkum komponen panel lipat

Asas pembangunan VUE3: Gunakan pemalam Vue.js untuk merangkum komponen panel lipat

Panel lipat ialah komponen UI biasa yang boleh digunakan untuk mengembangkan dan meruntuhkan kandungan. Dalam Vue.js, kami boleh menggunakan arahan atau komponen untuk melaksanakan panel akordion. Walau bagaimanapun, membangunkan komponen pendua adalah tugas yang membosankan, jadi menggunakan pemalam Vue.js untuk merangkum komponen panel akordion adalah penyelesaian yang lebih baik.

Artikel ini akan memperkenalkan cara menggunakan pemalam Vue.js untuk merangkum komponen panel lipat, termasuk pemasangan, penggunaan dan konfigurasi pemalam. Kami menggunakan Vue3 sebagai persekitaran pembangunan dan menggunakan Vite sebagai alat binaan.

Langkah 1: Buat projek dan pasang Vue.js

Pertama, kita perlu mencipta projek Vue.js baharu, masukkan arahan berikut:

npm init vite-app vue3-fold-panel

Ini akan mencipta a Buat projek Vite baharu dan namakannya "vue3-fold-panel".

Seterusnya, kita perlu memasang Vue.js. Anda boleh menggunakan arahan berikut untuk memasang:

npm install vue@next

Selepas pemasangan selesai, kami boleh mencipta contoh Vue baharu dalam projek:

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

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

Langkah 2: Tulis komponen panel akordion

Sebelum kita mula membungkus komponen akordion, kita perlu menentukannya terlebih dahulu. Buat folder baharu dalam direktori src/komponen dan namakannya "FoldPanel". Dalam folder itu, buat fail yang dipanggil "FoldPanel.vue" dan tulis kod berikut:

<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>

Dalam komponen ini, kami menggunakan ciri baharu "58cb293b8600657fad49ec2c8d37b472" dalam Vue3, Ia membolehkan kami memasukkan kandungan komponen dalam. Komponen akordion terdiri daripada dua bahagian: tajuk dan kandungan. Apabila pengguna mengklik pada tajuk, bahagian kandungan boleh diruntuhkan atau dikembangkan.

Kami mentakrifkan kaedah yang dipanggil "togglePanel" untuk menogol keadaan bahagian kandungan yang dikembangkan atau diruntuhkan. Kami juga mentakrifkan pembolehubah "showPanel" yang merekodkan sama ada bahagian kandungan perlu dipaparkan.

Langkah 3: Buat pemalam dan daftarkan komponen

Seterusnya, kami akan mencipta pemalam yang akan mendaftarkan komponen akordion kami secara global.

Dalam direktori src/plugins, buat fail bernama "fold-panel.js" dan tulis kod berikut:

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

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

Pemalam ini hanya mengandungi kaedah untuk mendaftarkan panel lipatan secara global . Kami menggunakan fungsi "app.component" untuk mendaftarkan komponen ke dalam tika Vue. Pemalam juga mengembalikan objek bernama "FoldPanel", yang membolehkan kami mengimport komponen menggunakan "import { FoldPanel } daripada 'fold-panel'" dalam komponen.

Langkah 4: Pasang pemalam ke dalam Vue.js

Kini, kami boleh memasang pemalam ke dalam aplikasi Vue.js kami. Buka fail src/main.js dan gunakan kod berikut untuk memasang pemalam:

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')

Ambil perhatian bahawa kami menggunakan API baharu Vue.js 3 “app.use” untuk memasang pemalam.

Langkah 5: Gunakan komponen akordion

Kini, kami boleh menggunakan komponen akordion kami dalam mana-mana komponen Vue. Hanya masukkan kod berikut ke dalam templat anda:

<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>

Ini akan memaparkan dua panel akordion pada halaman, setiap satu dengan bahagian tajuk dan kandungan. Apabila pengguna mengklik pada tajuk panel, bahagian kandungan mengembang atau runtuh.

Langkah 6: Konfigurasikan komponen

Komponen panel akordion kami juga boleh disesuaikan melalui sifat Berikut ialah beberapa sifat utama:

1. tajuk: Tajuk Panel Runtuh.
2. isCollapsed: Menentukan sama ada panel lipatan pada mulanya runtuh.

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

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

Dalam contoh ini, "Panel Runtuh 1" pada mulanya akan diruntuhkan. Kami boleh menetapkan sifat ini melalui templat semasa pemulaan.

3. showIcon: Menentukan sama ada untuk memaparkan ikon kembangkan/runtuhkan. Lalai adalah benar.

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

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

Dalam contoh ini, "Panel Runtuh 1" tidak akan memaparkan ikon kembangkan/runtuhkan.

4. iconPosition: Tentukan kedudukan ikon kembangkan/runtuhkan. Lalai ialah "kiri", iaitu bahagian kiri.

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

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

Dalam contoh ini, ikon kembangkan/runtuhkan untuk "Panel Runtuh 1" akan dipaparkan di sebelah kanan.

Pada ketika ini, komponen panel lipat kami telah dibungkus. Menggunakan pemalam Vue.js untuk merangkum komponen bukan sahaja mengurangkan kod pendua, tetapi juga menjadikan kod lebih modular dan boleh diperluaskan.

Atas ialah kandungan terperinci Asas pembangunan VUE3: Gunakan pemalam Vue.js untuk merangkum komponen panel lipat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!