俺搜 Nova UI 组件库 (Vue3 版本)

一个轻量级的基于 Vue3 的 UI 组件库。

安装

npm install @antsoo-lib/antsoo-nova-plus --save

使用方法

完整引入

import Vue from "vue";
import "@antsoo-lib/antsoo-nova-plus/dist/style.css";
import NovaUI from "@antsoo-lib/antsoo-nova-plus";

// 使用默认前缀'Nova'注册所有组件（如NovaButton）
Vue.use(NovaUI);

// 如果需要自定义前缀，可以传入选项
Vue.use(NovaUI, { prefix: "Ant" }); // 组件将以 AntButton 的形式注册

按需引入

import Vue from "vue";
import { Button } from "@antsoo-lib/antsoo-nova-plus";
import "@antsoo-lib/antsoo-nova-plus/dist/style.css";

// 方法1: 使用组件自带的install方法注册（推荐）
Vue.use(Button);

// 方法2: 手动注册组件
Vue.component("NovaButton", Button);

常见问题

使用全局引入方式但组件未注册

如果你在使用 Vue.use(NovaUI) 后仍然收到 "Unknown custom element" 警告，请尝试以下解决方案：

1. 检查导入方式：

// 确认导入的是默认导出
import NovaUI from "@antsoo-lib/antsoo-nova-plus";
import "@antsoo-lib/antsoo-nova-plus/dist/style.css";
Vue.use(NovaUI);

// 如果仍有问题，尝试：
import * as NovaUIModule from "@antsoo-lib/antsoo-nova-plus";
import "@antsoo-lib/antsoo-nova-plus/dist/style.css";
Vue.use(NovaUIModule.default);

2. 确保 Vue 实例唯一：请确保项目中只有一个 Vue 实例，不要在不同文件中重复引入 Vue。

3. 检查组件名称：默认情况下，组件会以 NovaButton 和 nova-button 两种名称注册，请确保模板中使用的是正确的名称。

4. 添加兼容模式：如果上述方法都无效，你可以尝试在 Vue 实例创建后手动注册组件：

import NovaUI from "@antsoo-lib/antsoo-nova-plus";
import "@antsoo-lib/antsoo-nova-plus/dist/style.css";
import { Button } from "@antsoo-lib/antsoo-nova-plus";

Vue.use(NovaUI);
// 额外手动注册一次
Vue.component("NovaButton", Button);
Vue.component("nova-button", Button);

组件列表

Button 按钮

基础的按钮组件。

基本用法

<template>
	<div>
		<NovaButton>默认按钮</NovaButton>
		<NovaButton type="primary">主要按钮</NovaButton>
		<NovaButton size="small">小按钮</NovaButton>
		<NovaButton size="large">大按钮</NovaButton>
		<NovaButton disabled>禁用按钮</NovaButton>
	</div>
</template>

如果你自定义了前缀，则使用对应的前缀名称：

<template>
	<div>
		<AntButton>默认按钮</AntButton>
		<AntButton type="primary">主要按钮</AntButton>
	</div>
</template>

属性

| 属性名 | 类型 | 默认值 | 说明 | | -------- | ------- | ------- | ------------------------------------ | | type | String | default | 按钮类型，可选：default, primary | | size | String | medium | 按钮大小，可选：small, medium, large | | disabled | Boolean | false | 是否禁用 |

事件

| 事件名 | 说明 | 回调参数 | | ------ | -------------- | ----------------- | | click | 点击按钮时触发 | event: MouseEvent |