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>