Tutoriel de base VUE3 : Utiliser le plug-in Vue.js pour encapsuler les composants de développement et de réduction

Dans le développement front-end, il est souvent nécessaire d'utiliser la fonction développer et réduire pour réduire le contenu de la page et améliorer l'expérience utilisateur. Vue.js est un framework frontal populaire qui peut nous aider à implémenter facilement la fonction d'expansion et de réduction. Cet article explique comment utiliser le plug-in Vue.js pour encapsuler les composants de développement et de réduction.

1. Créer un plug-in Vue.js
Le processus de création d'un plug-in Vue.js est très simple. Nous terminerons la création du plug-in dans les étapes suivantes :

1. et définir le composant

Dans ce composant, nous utiliserons du code HTML écrit et du code JavaScript pour implémenter un composant d'interface utilisateur avec deux états : "développé" et "réduit". Le code global est le suivant :

<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. Créez un fichier index.js pour exporter le plug-in

Dans ce fichier, nous devons importer le fichier .vue et utiliser le composant dans le constructeur de Vue.js. De cette façon, notre composant sera inscrit dans la portée globale de Vue.js.

import CollapseTransition from './CollapseTransition.vue'

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

export default plugin

export { CollapseTransition }

3. Créez le fichier package.json

Nous créons un fichier package.json vide pour servir de fichier de configuration de notre plug-in.

{
  "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. Utilisez rollup.js pour empaqueter le plug-in

Nous utilisons l'outil rollup.js pour empaqueter le plug-in dans un fichier. Cet outil peut regrouper notre fichier .vue et notre fichier index.js dans un fichier .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. Publiez le plug-in dans le référentiel npm

Utilisez la commande npmpublish pour publier le plug-in dans le référentiel npm afin de terminer la version du plug-in.

2. Comment utiliser les plug-ins dans les projets
Après les étapes ci-dessus, notre plug-in a été empaqueté et publié dans l'entrepôt npm. Nous pouvons utiliser ce plugin dans n'importe quel projet Vue.js. Ensuite, nous montrerons comment utiliser ce plug-in dans le projet.

1. Installez le plug-in

Nous pouvons utiliser la commande npm install/vue-cli-plugin-cypress pour installer notre plug-in.

npm install vue-collapse-transition-plugin

2. Introduisez les plug-ins dans le projet Vue.js

Nous introduisons nos plug-ins dans le fichier 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. Utiliser les composants et configurer les paramètres

Nous utilisons les composants du fichier App.vue et configurons certains paramètres pour montrer comment ce composant est utilisé dans les projets réels.

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

A travers cet exemple simple de composant d'interface utilisateur, nous pouvons voir que l'utilisation de plug-ins est très pratique. Dans notre projet actuel, nous pouvons utiliser rapidement ce composant d'interface utilisateur riche en fonctionnalités en quelques étapes simples.

3. Résumé
Dans cet article, nous avons appris à utiliser le plug-in Vue.js pour encapsuler les composants d'interface utilisateur développés et réduits. En créant un plug-in Vue.js et en le publiant dans le référentiel npm, nous pouvons rapidement utiliser ce composant d'interface utilisateur riche en fonctionnalités dans n'importe quel projet Vue.js. Le développement de plugins est une compétence très importante dans Vue.js, nous espérons que cet article vous a été utile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!