Tutorial asas VUE3: Gunakan pemalam Vue.js untuk merangkum komponen kembangkan dan runtuh

Dalam pembangunan bahagian hadapan, selalunya perlu menggunakan fungsi kembangkan dan runtuh untuk mengurangkan kandungan halaman dan meningkatkan pengalaman pengguna. Vue.js ialah rangka kerja bahagian hadapan yang popular yang boleh membantu kami melaksanakan fungsi kembangkan dan runtuh dengan mudah. Artikel ini akan memperkenalkan cara menggunakan pemalam Vue.js untuk merangkum komponen kembangkan dan runtuh.

1 Cipta pemalam Vue.js
Proses mencipta pemalam Vue.js adalah sangat mudah Kami akan melengkapkan penciptaan pemalam dalam langkah berikut:

1. Buat fail vue dan tentukan komponen

Dalam komponen ini, kami akan menggunakan kod HTML bertulis dan kod JavaScript untuk melaksanakan komponen UI dengan dua keadaan "diperluas" dan "diruntuhkan ". Kod keseluruhan adalah seperti berikut:

<template>
  <div>
    <div v-if="showContent">
      <slot></slot>
    </div>
    <div v-else>
      <slot name="less"></slot>
    </div>
    <button v-if="isButtonVisible" @click="toggleContent">
      {{ showContent ? buttonText.less : buttonText.more }}
    </button>
  </div>
</template>

<script>
export default {
  name: 'collapse-transition',
  props: {
    buttonText: {
      type: Object,
      default: () => ({ more: '展开', less: '收起' })
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showContent: this.visible,
    }
  },
  methods: {
    toggleContent() {
      this.showContent = !this.showContent;
    }
  },
  computed: {
    isButtonVisible() {
      return this.$slots.less !== undefined;
    }
  }
}
</script>

2 Cipta fail index.js untuk mengeksport pemalam

Dalam fail ini, kita perlu mengimport fail .vue dan membinanya dalam. Vue.js Gunakan komponen dalam fungsi. Dengan cara ini, komponen kami akan didaftarkan dalam skop global Vue.js.

import CollapseTransition from './CollapseTransition.vue'

const plugin = {
  install(Vue) {
    Vue.component('CollapseTransition', CollapseTransition)
  }
}

export default plugin

export { CollapseTransition }

3. Cipta fail package.json

Kami mencipta fail package.json kosong untuk berfungsi sebagai fail konfigurasi pemalam kami.

{
  "name": "vue-collapse-transition-plugin",
  "version": "1.0.0",
  "description": "A Vue.js plugin for creating collapse transitions",
  "main": "dist/index.js",
  "keywords": [
    "Vue.js",
    "plugin",
    "transition",
    "collapse"
  ],
  "dependencies": {
    "vue": "^3.0.0"
  }
}

4. Gunakan rollup.js untuk membungkus pemalam

Kami menggunakan alat rollup.js untuk membungkus pemalam ke dalam fail. Alat ini boleh membungkus fail .vue dan fail index.js kami ke dalam fail .min.js.

import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import babel from '@rollup/plugin-babel'
import { terser } from 'rollup-plugin-terser'

import pkg from './package.json'

export default {
  input: 'index.js',
  output: [
    {
      file: pkg.main,
      format: 'umd',
      name: 'VueCollapseTransition',
      plugins: [terser()]
    },
    {
      file: pkg.module,
      format: 'es'
    }
  ],
  external: ['vue'],
  plugins: [
    resolve(),
    commonjs(),
    babel({ babelHelpers: 'runtime' })
  ]
}

5. Terbitkan pemalam ke repositori npm

Gunakan arahan npm publish untuk menerbitkan pemalam ke repositori npm untuk melengkapkan keluaran pemalam.

2. Cara menggunakan pemalam dalam projek
Selepas langkah di atas, pemalam kami telah dibungkus dan diterbitkan ke gudang npm. Kami boleh menggunakan pemalam ini dalam mana-mana projek Vue.js. Seterusnya, kami akan menunjukkan cara menggunakan pemalam ini dalam projek.

1. Pasang pemalam

Kita boleh menggunakan arahan npm install/vue-cli-plugin-cypress untuk memasang pemalam kami.

npm install vue-collapse-transition-plugin

2. Perkenalkan pemalam ke dalam projek Vue.js

Kami memperkenalkan pemalam kami dalam fail main.js.

import Vue from 'vue'
import App from './App.vue'
import plugin from 'vue-collapse-transition-plugin'

Vue.config.productionTip = false

Vue.use(plugin)

new Vue({
  render: h => h(App),
}).$mount('#app')

3. Gunakan komponen dan konfigurasikan parameter

Kami menggunakan komponen dalam fail App.vue dan mengkonfigurasi beberapa parameter untuk menunjukkan cara komponen ini digunakan dalam projek sebenar.

<template>
  <CollapseTransition :buttonText="{ more: '展开一下', less: '收起一下' }">
    <template #less>
      更多信息
    </template>
    <div>
      <ul>
        <li v-for="(item, index) in list" :key="index">{{ item }}</li>
      </ul>
    </div>
  </CollapseTransition>
</template>

<script>
import { CollapseTransition } from 'vue-collapse-transition-plugin'

export default {
  name: 'App',
  data() {
    return {
      list: ['item 1', 'item 2', 'item 3', 'item 4', 'item 5']
    }
  },
  components: {
    CollapseTransition
  }
}
</script>

Melalui contoh komponen UI yang mudah ini, kita dapat melihat bahawa penggunaan pemalam adalah sangat mudah. Dalam projek sebenar kami, kami boleh menggunakan komponen UI yang kaya dengan ciri ini dengan cepat dalam beberapa langkah mudah sahaja.

3. Ringkasan
Dalam artikel ini, kami mempelajari cara menggunakan pemalam Vue.js untuk merangkum komponen UI kembangkan dan runtuh. Dengan mencipta pemalam Vue.js dan menerbitkannya ke repositori npm, kami boleh menggunakan komponen UI yang kaya dengan ciri ini dengan cepat dalam mana-mana projek Vue.js. Pembangunan pemalam ialah kemahiran yang sangat penting dalam Vue.js, kami berharap artikel ini dapat membantu anda.

Atas ialah kandungan terperinci Tutorial asas VUE3: Gunakan pemalam Vue.js untuk merangkum komponen kembangkan dan runtuh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!