conor-ui

对标 Vant 的 Vue3 组件库，基于 Vite + TypeScript。

特性

• 轻量、易用、风格统一
• 支持全局注册和按需引入
• 支持 TypeScript 类型提示
• 组件 API 设计参照 Vant

安装

npm install conor-ui --save

快速上手

全局引入

import { createApp } from 'vue';
import App from './App.vue';
import ConorUI from 'conor-ui';
import 'conor-ui/dist/conor-ui.css';

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

按需引入

import { Button, Icon } from 'conor-ui';
import 'conor-ui/dist/conor-ui.css';

样式引入

import 'conor-ui/dist/conor-ui.css';

组件一览

Button 按钮

| 属性 | 说明 | 类型 | 默认值 | |-----------|----------------|----------|-----------| | type | 按钮类型 | 'default' | 'primary' | 'success' | 'danger' | 'warning' | 'default' | | size | 按钮尺寸 | 'large' | 'normal' | 'small' | 'mini' | 'normal' | | disabled | 是否禁用 | boolean | false |

Icon 图标

| 属性 | 说明 | 类型 | 默认值 | |-----------|----------------|----------|-----------| | name | 图标名称 | 'check' | 'close' | - |

Cell 单元格

| 属性 | 说明 | 类型 | 默认值 | |-----------|----------------|----------|-----------| | title | 标题 | string | - | | value | 右侧内容 | string | - | | icon | 左侧图标 | string | - | | label | 描述 | string | - | | isLink | 是否展示箭头 | boolean | false |

Row 行

| 属性 | 说明 | 类型 | 默认值 | |-----------|----------------|----------|-----------| | gutter | 列间距 | number | 0 |

Col 列

| 属性 | 说明 | 类型 | 默认值 | |-----------|----------------|----------|-----------| | span | 占据列数 | number | 24 |

Tag 标签

| 属性 | 说明 | 类型 | 默认值 | |-----------|----------------|----------|-----------| | type | 类型 | 'default' | 'primary' | 'success' | 'danger' | 'warning' | 'default' | | plain | 是否空心 | boolean | false | | round | 是否圆角 | boolean | false | | mark | 是否标记样式 | boolean | false |

贡献指南

欢迎 issue 和 PR！