syncfusion-vue-common

Syncfusion Vue コンポーネントの共通機能

Syncfusion Vue コンポーネントには、ユーザーエクスペリエンスを向上させ、異文化への対応を確保し、すべてのコンポーネントで基盤となる機能を提供する、包括的な共通ユーティリティと機能が備わっています。このスキルでは、堅牢な Vue アプリケーションを構築するためのインストール設定、アニメーション、グローバリゼーション、状態管理、セキュリティに関する考慮事項について説明します。

目次

• ナビゲーションガイド
• クイックスタート
• 共通機能

---

ドキュメントとナビゲーションガイド

はじめに

📄 参照: references/getting-started.md

• Vue 3 のセットアップ（Composition API、Options API）
• Vue 2 のセットアップ（Vue CLI、SCSS の設定）
• Nuxt 3 の統合と設定
• Quasar フレームワークのセットアップ
• Vitest のテスト設定

---

グローバリゼーション

📄 参照: references/globalization.md

• アラビア語、ヘブライ語、ペルシャ語に対応する右から左（RTL）への表示
• 多言語対応のためのローカライゼーション（l10n）
• CLDR データを使用した国際化（i18n）
• 数値と通貨の書式設定
• 日付と時刻の書式設定

---

高度な機能とユーティリティ

📄 参照: references/advanced-features.md

• アニメーション効果（FadeIn、ZoomOut、SlideUp など）
• アニメーションのタイミング（継続時間、遅延、グローバル設定）
• ドラッグ＆ドロップ操作（Draggable、Droppable）
• テンプレートのカスタマイズ
• enablePersistence による状態の永続化
• セキュリティのベストプラクティスと HTML のサニタイズ

---

クイックスタート

Syncfusion Vue コンポーネントパッケージとテーマパッケージをインストールする

# Install a Syncfusion component package
npm install @syncfusion/ej2-vue-calendars@latest @syncfusion/ej2-material-theme@latest --save

# Install multiple packages
npm install @syncfusion/ej2-vue-grids@latest @syncfusion/ej2-vue-charts@latest @syncfusion/ej2-material-theme@latest --save

注: @syncfusion/ej2-base パッケージはすべての Syncfusion コンポーネントの依存関係であり、Syncfusion Vue パッケージをインストールすると自動的にインストールされます。package.json ファイルに明示的に追加する必要はありません。

ライセンスキーを登録する

ステップ 1: 環境変数を設定します。

# Windows
setx SYNCFUSION_LICENSE "Your_License_Key_Here"

# Mac/Linux
export SYNCFUSION_LICENSE='Your_License_Key_Here'

ステップ 2: NPX コマンドを使用してライセンスを有効化します。

npx syncfusion-license activate

注: その他のライセンス登録方法については、Syncfusion ライセンスキー登録ドキュメントを参照してください。

基本的なコンポーネントのセットアップ

<template>
  <div class="app-container">
    <ejs-grid :dataSource="data" :allowPaging="true">
      <e-columns>
        <e-column field='OrderID' width='100'></e-column>
        <e-column field='CustomerID' width='100'></e-column>
        <e-column field='Freight' width='100' format='C2'></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { GridComponent as EjsGrid, ColumnsDirective as EColumns, ColumnDirective as EColumn, Page } from '@syncfusion/ej2-vue-grids';

const data = ref([
  { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
  { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 }
]);

// Provide services
provide('grid', [Page]);
</script>

<style>
/* Import theme CSS */
@import "../node_modules/@syncfusion/ej2-material-theme/styles/grid/index.css";
</style>

---

共通機能

状態の永続化を有効にする

<template>
  <ejs-grid id="persistGrid" :dataSource="data" :enablePersistence="true"></ejs-grid>
</template>

<script>
import { GridComponent } from '@syncfusion/ej2-vue-grids';

export default {
  components: { 'ejs-grid': GridComponent },
  data() {
    return {
      data: [{ OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 }]
    };
  }
};
</script>

RTL 対応を有効にする

<template>
  <ejs-grid :dataSource="data" :enableRtl="true"></ejs-grid>
</template>

<script>
import { GridComponent } from '@syncfusion/ej2-vue-grids';
import { enableRtl } from '@syncfusion/ej2-base';

export default {
  components: { 'ejs-grid': GridComponent },
  data() {
    return { data: [{ OrderID: 10248 }] };
  },
  mounted() {
    enableRtl(true);
  }
};
</script>

アニメーション効果を追加する

<template>
  <div>
    <button @click="animateElement">Animate</button>
    <div ref="element">Animated Element</div>
  </div>
</template>

<script>
import { Animation } from '@syncfusion/ej2-base';

export default {
  data() {
    return { animation: null };
  },
  mounted() {
    this.animation = new Animation({ duration: 5000 });
  },
  methods: {
    animateElement() {
      this.animation.animate(this.$refs.element, { name: 'FadeOut' });
    }
  }
};
</script>

ドラッグ＆ドロップを実装する

<template>
  <div>
    <div ref="draggable">Drag me</div>
    <div ref="droppable">Drop here</div>
  </div>
</template>

<script>
import { Draggable, Droppable } from '@syncfusion/ej2-base';

export default {
  mounted() {
    new Draggable(this.$refs.draggable, { clone: false });
    new Droppable(this.$refs.droppable);
  }
};
</script>