@hbdlzy/ui-core
v0.1.8
Published
Company shared Vue UI core package.
Downloads
1,097
Readme
@hbdlzy/ui-core
@hbdlzy/ui-core 负责沉淀跨项目复用的基础 UI 组件和无业务依赖的前端工具。
当前内容
BaseTableBaseCardBaseEChartBaseExportButtonSvgIconOutlinedInputOutlinedSelectOutlinedDatePickerOutlinedDateTimePickerOutlinedTimePickerOutlinedCascaderOutlinedTreeSelectechartsexportExcelRipple- 全局点击涟漪:导入包入口后自动启用,覆盖原生
button、Element Plusel-button以及 radio/checkbox button 形态
使用方式
全局注册
只使用核心包时,可以按 Vue 插件注册所有 ui-core 组件:
import { createApp } from 'vue'
import HbdlUICore from '@hbdlzy/ui-core'
import App from './App.vue'
createApp(App).use(HbdlUICore).mount('#app')按需导入
import {
BaseTable,
BaseCard,
BaseEChart,
BaseExportButton,
SvgIcon,
OutlinedInput,
OutlinedSelect,
OutlinedDatePicker,
OutlinedDateTimePicker,
OutlinedTimePicker,
OutlinedCascader,
OutlinedTreeSelect,
Ripple,
installRipple,
uninstallRipple,
echarts,
exportExcel
} from '@hbdlzy/ui-core'全局点击涟漪会在导入 @hbdlzy/ui-core 时自动安装;如某个按钮不需要水波纹,可在按钮或父级元素上添加 data-hbdl-ripple="false"。
如果业务项目希望显式控制安装时机,也可以使用插件或细粒度入口:
import { createApp } from 'vue'
import { Ripple } from '@hbdlzy/ui-core/ripple'
import App from './App.vue'
createApp(App).use(Ripple).mount('#app')详细文档
Ripple: src/ripple/README.mdBaseTable: src/components/BaseTable/README.mdBaseCard: src/components/BaseCard/README.mdBaseEChart: src/components/BaseEChart/README.mdBaseExportButton: src/components/BaseExportButton/README.mdSvgIcon: src/components/SvgIcon/README.mdOutlinedInput: src/components/OutlinedInput/README.mdOutlinedSelect: src/components/OutlinedSelect/README.mdOutlinedDatePicker: src/components/OutlinedDatePicker/README.mdOutlinedDateTimePicker: src/components/OutlinedDateTimePicker/README.mdOutlinedTimePicker: src/components/OutlinedTimePicker/README.mdOutlinedCascader: src/components/OutlinedCascader/README.mdOutlinedTreeSelect: src/components/OutlinedTreeSelect/README.md- AI 清单: components.manifest.json
当前导出能力
- 组件
BaseTableBaseCardBaseEChartBaseExportButtonSvgIconOutlinedInputOutlinedSelectOutlinedDatePickerOutlinedDateTimePickerOutlinedTimePickerOutlinedCascaderOutlinedTreeSelect
- 工具
echartsexportExcelRippleinstallRippleuninstallRipple
设计原则
- 只做基础 UI 和交互
- 不直接依赖接口、路由、store
- 每个组件必须配套 README 和 AI manifest
