@xn-lib/component

基于 Element Plus 的 Vue 3 企业级组件库，提供完整的 TypeScript 类型支持。

✨ 特性

• 🎯 TypeScript 支持 - 完整的类型定义，自动生成类型声明
• 🧩 企业级组件 - 基于 Element Plus 二次封装
• ⚡️ Vue 3 + Vite - 现代化开发体验
• 📦 按需引入 - 支持全量和按需引入
• 🎨 主题定制 - 基于 Element Plus 主题系统

📦 安装

# npm
npm install @xn-lib/component element-plus

# pnpm
pnpm add @xn-lib/component element-plus

# yarn
yarn add @xn-lib/component element-plus

🔨 使用

完整引入

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import XnComponents from '@xn-lib/component'
import '@xn-lib/component/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(XnComponents)
app.mount('#app')

按需引入

<template>
  <xn-cascader
    v-model="value"
    :options="options"
    placeholder="请选择"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Cascader as XnCascader } from '@xn-lib/component'
import '@xn-lib/component/dist/index.css'
import type { CascaderOption } from '@xn-lib/component'

const value = ref(null)
const options = ref<CascaderOption[]>([
  {
    label: '选项1',
    value: '1',
    children: [
      { label: '子选项1-1', value: '1-1' }
    ]
  }
])
</script>

📝 TypeScript 支持

组件库使用 vue-tsc 自动生成类型声明，提供完整的类型支持：

• ✅ 组件标签自动提示
• ✅ Props 属性自动提示
• ✅ Props 类型错误提示
• ✅ 事件类型提示
• ✅ 实例方法类型提示

import type {
  CascaderProps,
  CascaderOption,
  CascaderValue,
  CascaderInst
} from '@xn-lib/component'

// Props 类型
const props: CascaderProps = {
  modelValue: null,
  options: [],
  multiple: false
}

// Option 类型
const options: CascaderOption[] = [
  {
    label: '选项1',
    value: '1',
    children: []
  }
]

// 实例类型
import { ref } from 'vue'
const cascaderRef = ref<CascaderInst>()
cascaderRef.value?.focus()

📚 组件列表

Cascader 级联选择器

支持单选、多选、搜索、远程加载、虚拟滚动等功能。

查看文档

🔗 链接

• 文档
• GitHub
• 更新日志

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 License

MIT