xenondm

xenondm

独立 Vue3 组件库（Xe- 通用 / Dm- 业务）。

npm i xenondm

快速开始

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import XenonDM, { XeEcharts, XeEditor, XeFile } from 'xenondm'
import 'xenondm/style.css'

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

按需引入：

import { XeEditor } from 'xenondm/xe-editor'
import { XeFile, createMockTransport } from 'xenondm/xe-file'
import { XeEcharts } from 'xenondm/xe-echarts'

组件

XeEditor

type: json | code | rich（动态 import，互不影响）

<XeEditor v-model="code" type="code" language="js" style="height: 360px" />

另导出（子路径，避免打进主包）：

import { XeCodeEditor, XeEditorLite } from 'xenondm/xe-editor'

XeFile（0.2.0 新增）

上传 / 列表 / 预览一体。配置对象化；外观用 class + slot。

<script setup lang="ts">
import { XeFile, createRequestTransport } from 'xenondm/xe-file'

const transport = createRequestTransport({
  uploadUrl: '/api/v1/files/upload',
  downloadUrl: id => `/api/v1/files/${id}`,
})
</script>

<template>
  <XeFile
    class="my-file"
    :transport="transport"
    :rules="{ accept: ['image/*'], maxSize: 20 * 1024 * 1024, maxCount: 12 }"
    :layout="{ type: 'split', height: 480 }"
    :labels="{ upload: '上传', list: '列表' }"
  >
    <template #drag-area="{ dragging }">
      <div>{{ dragging ? '松开上传' : '点击或拖拽' }}</div>
    </template>
  </XeFile>
</template>

也导出原子能力：XeFileUpload、XeFileList、XeFilePreview、useFileUpload、createMockTransport、downloadFileItem 等。

XeFile 依赖 element-plus、@element-plus/icons-vue；createRequestTransport 依赖 axios（均为 optional peer）。

XeEcharts / DmPanel

<XeEcharts :option="option" />
<DmPanel title="面板">内容</DmPanel>

Peer 依赖