VUE3 基本チュートリアル: Vue.js プラグインを使用して展開コンポーネントと折りたたみコンポーネントをカプセル化する

フロントエンド開発では、ページのコンテンツを縮小してユーザー エクスペリエンスを向上させるために、展開および折りたたみ機能を使用することが必要になることがよくあります。 Vue.js は、展開および折りたたみ機能を簡単に実装できる人気のあるフロントエンド フレームワークです。この記事では、Vue.js プラグインを使用して展開コンポーネントと折りたたみコンポーネントをカプセル化する方法を紹介します。

1. Vue.js プラグインの作成
Vue.js プラグインの作成プロセスは非常に簡単で、次の手順でプラグインの作成を完了します。

##1. .vue ファイルを作成し、コンポーネントを定義します

##このコンポーネントでは、記述された HTML コードと JavaScript コードを使用して、「展開」と「折りたたみ」の 2 つの状態を持つ UI コンポーネントを実装します。 」。コード全体は次のとおりです:

<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. プラグインをエクスポートするためのindex.js ファイルを作成します

このファイルでは、.vue ファイルをインポートして構築する必要があります。 Vue.js 関数内でコンポーネントを使用します。このようにして、コンポーネントは Vue.js のグローバル スコープに登録されます。

import CollapseTransition from './CollapseTransition.vue'

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

export default plugin

export { CollapseTransition }

3. package.json ファイルの作成

プラグインの構成ファイルとして機能する空の package.json ファイルを作成します。

{
  "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. rollup.js を使用してプラグインをパッケージ化する

rollup.js ツールを使用して、プラグインをファイルにパッケージ化します。このツールは、.vue ファイルとindex.js ファイルを .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. プラグインを npm リポジトリに公開する

npm pub コマンドを使用してプラグインを npm リポジトリに公開し、プラグインのリリースを完了します。

2. プロジェクトでプラグインを使用する方法

上記の手順の後、プラグインはパッケージ化され、npm ウェアハウスに公開されます。このプラグインは任意の Vue.js プロジェクトで使用できます。次に、プロジェクトでこのプラグインを使用する方法を示します。

1. プラグインをインストールします

npm install/vue-cli-plugin-cypress コマンドを使用してプラグインをインストールできます。

npm install vue-collapse-transition-plugin

2. Vue.js プロジェクトへのプラグインの導入

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. コンポーネントを使用してパラメーターを構成する

App.vue ファイル内のコンポーネントを使用し、いくつかのパラメーターを構成して、このコンポーネントが実際のプロジェクトでどのように使用されるかを示します。

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

この単純な UI コンポーネントの例を通して、プラグインの使用が非常に便利であることがわかります。実際のプロジェクトでは、この機能豊富な UI コンポーネントを、いくつかの簡単な手順ですぐに使用できます。

3. 概要

この記事では、Vue.js プラグインを使用して展開および折りたたみ UI コンポーネントをカプセル化する方法を学びました。 Vue.js プラグインを作成して npm リポジトリに公開すると、この機能豊富な UI コンポーネントを任意の Vue.js プロジェクトですぐに使用できます。プラグイン開発は Vue.js において非常に重要なスキルです。この記事がお役に立てば幸いです。

以上がVUE3 基本チュートリアル: Vue.js プラグインを使用して展開コンポーネントと折りたたみコンポーネントをカプセル化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。