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

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

Jun 15, 2023 pm 06:17 PM
vue 插件 vuejs

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>
Copier après la connexion

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 }
Copier après la connexion

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"
  }
}
Copier après la connexion

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' })
  ]
}
Copier après la connexion

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
Copier après la connexion

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')
Copier après la connexion

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>
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment utiliser les graphiques électroniques dans Vue Comment utiliser les graphiques électroniques dans Vue May 09, 2024 pm 04:24 PM

Comment utiliser les graphiques électroniques dans Vue

Le rôle de l'export par défaut dans vue Le rôle de l'export par défaut dans vue May 09, 2024 pm 06:48 PM

Le rôle de l'export par défaut dans vue

Comment utiliser la fonction map dans vue Comment utiliser la fonction map dans vue May 09, 2024 pm 06:54 PM

Comment utiliser la fonction map dans vue

La différence entre event et $event dans vue La différence entre event et $event dans vue May 08, 2024 pm 04:42 PM

La différence entre event et $event dans vue

La différence entre l'exportation et l'exportation par défaut dans vue La différence entre l'exportation et l'exportation par défaut dans vue May 08, 2024 pm 05:27 PM

La différence entre l'exportation et l'exportation par défaut dans vue

Le rôle du monté en vue Le rôle du monté en vue May 09, 2024 pm 02:51 PM

Le rôle du monté en vue

Onmount en vue correspond à quel cycle de vie de réagir Onmount en vue correspond à quel cycle de vie de réagir May 09, 2024 pm 01:42 PM

Onmount en vue correspond à quel cycle de vie de réagir

Pour quels scénarios les modificateurs d'événements dans vue peuvent-ils être utilisés ? Pour quels scénarios les modificateurs d'événements dans vue peuvent-ils être utilisés ? May 09, 2024 pm 02:33 PM

Pour quels scénarios les modificateurs d'événements dans vue peuvent-ils être utilisés ?

See all articles