wncomponetstest 组件库

基于 Vue3 + Vite + TypeScript 的简易组件库，当前包含 Button 按钮 和 Input 输入框。

安装

npm install wncomponetstest

样式引入

npm/ESM 项目

在入口文件手动引入样式：

import 'wncomponetstest/dist/wncomponetstest.css'

CDN/UMD 场景

在 HTML 中手动引入：

<link rel="stylesheet" href="https://unpkg.com/wncomponetstest/dist/wncomponetstest.css">
<script src="https://unpkg.com/wncomponetstest"></script>

说明：Vite、Webpack5 等现代工具会校验 package.json 的 exports 字段，已为 CSS 文件补充导出，无需担心“Missing specifier”报错。

使用

全局注册

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import WnComponetstest from 'wncomponetstest'
import 'wncomponetstest/dist/wncomponetstest.css'

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

按需引入

import { Button, Input } from 'wncomponetstest'
import 'wncomponetstest/dist/wncomponetstest.css'

组件示例

Button 按钮

<Button type="primary" @click="onClick">主要按钮</Button>
<Button type="success">成功按钮</Button>
<Button type="danger" disabled>禁用按钮</Button>

Input 输入框

<Input v-model="value" placeholder="请输入内容" clearable />

组件属性

Button

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |---------|------------|-------|-----------------------------|--------| | type | 按钮类型 | string| primary/success/warning/danger/info | primary| | disabled| 是否禁用 | boolean| - | false |

Input

| 属性 | 说明 | 类型 | 默认值 | |-----------|------------|--------|--------| | modelValue| 绑定值 | string | - | | placeholder| 占位符 | string | - | | disabled | 是否禁用 | boolean| false | | clearable | 是否可清空 | boolean| false |

License

MIT