xys-component-library

English

基于 Vue 3 和 Element Plus 的组件库。

安装

pnpm add xys-component-library

宿主项目需要自行安装以下 peerDependencies：

pnpm add vue element-plus @element-plus/icons-vue

全量注册

import { createApp } from "vue"
import ElementPlus from "element-plus"
import XysComponentLibrary from "xys-component-library"
import "xys-component-library/style.css"

const app = createApp(App)

app.use(ElementPlus)
app.use(XysComponentLibrary)

按需引入

import {
  Button,
  Dialog,
  FilterForm,
  SelectSearch,
  XysForm,
  XysSearch,
  XysTable
} from "xys-component-library"

当前导出

Button
ConfigProvider
DeepButton
Dialog
Drawer
FilterForm
Panel
PanelFooter
PanelItem
PanelTitle
SelectSearch
Upload
XysButton
XysEllipsis
XysForm
XysSearch
XysTable

XysTable 示例

<script setup lang="ts">
import { ref } from "vue"
import { XysTable } from "xys-component-library"

const columns = [
  { label: "名称", prop: "name" },
  { label: "状态", prop: "status" },
  { label: "创建时间", prop: "createdAt", dataType: "time" }
]

const data = ref([
  { id: 1, name: "Alpha", status: "启用", createdAt: "2026-07-03 10:00:00" }
])
</script>

<template>
  <XysTable :columns="columns" :data="data" cid="demo-table" />
</template>

说明：

• cid 用于区分表格列配置持久化作用域
• 不想持久化列配置时，传 :persist="false"
• 需要手动指定持久化键时，传 storageKey

构建与发布

pnpm run build:lib
npm publish

build:lib 会生成：

• dist/xys-component-library.es.js
• dist/xys-component-library.umd.js
• dist/style.css
• dist/types