快速开始

安装

ez-ui 发布在私服（包名 ez-ui），安装前请先将 npm 镜像源切换到私服（推荐使用 nrm 管理镜像源）；同时在 npm 公共源发布有镜像包 @maxtan/ez-ui。

推荐使用 pnpm 作为包管理器，组件库依赖 element-plus。

# 私服（需先切换到私服镜像源）
pnpm add element-plus ez-ui

# 公共源
pnpm add element-plus @maxtan/ez-ui

下文示例按私服包名 ez-ui 书写；公共源安装请将导入路径中的包名替换为 @maxtan/ez-ui。

使用

在入口文件引入样式，并通过 el-config-provider 配置 element-plus 语言。

App.vue

<template>
  <el-config-provider :locale="zhCn">...</el-config-provider>
</template>
<script setup lang="ts">
import 'element-plus/dist/index.css'
import 'ez-ui/dist/index.css'
import { zhCn } from 'element-plus/es/locale/lang/zh-cn'
</script>

全量注册

在入口文件安装 ez-ui，一次性注册全部 Ez 组件。

main.ts

import { createApp } from 'vue'
import EzUI from 'ez-ui'
import App from './App.vue'

const app = createApp(App)
app.use(EzUI)

按需引入

在用到的地方直接导入组件，无需全局注册。

demo.vue

<template>
  <div>
    <el-button type="primary" @click="flag = !flag">Dialog</el-button>
    <ez-dialog v-model="flag">
      <div>dialog content</div>
    </ez-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { EzDialog } from 'ez-ui'
const flag = ref(false)
</script>

国际化（可选）

组件内置文案（查询、重置、上传提示等）使用公共翻译系统的雪花 key。宿主未提供译文时，组件自动回退内置中文——即不做任何国际化配置，界面也是完整可用的中文。

如需切换语言，将公共翻译系统导出的雪花 key 词条合入 el-config-provider 的 locale 即可：

App.vue

<template>
  <el-config-provider :locale="locale">...</el-config-provider>
</template>
<script setup lang="ts">
import { zhCn } from 'element-plus/es/locale/lang/zh-cn'
// 公共翻译系统导出的目标语言词条（雪花 key → 译文）
const locale = {
  ...zhCn,
  'i1998318595301830658': 'Query', // 查询
  'i1998318602172100610': 'Reset' // 重置
}
</script>

占位符使用 {v0} 形式，例如大小限制词条 'i2018934089621774338': '文件大小不能超过 {v0} MB!' 会自动用组件传入的实际值渲染。