Wiser Components

一个基于 Vue2 的组件库

安装

# 安装组件库
npm install wiser-components

# 安装依赖（必需！）
npm install element-ui

重要提示：

1. 本组件库必须依赖 Element-UI，使用前必须先安装 Element-UI
2. Element-UI 必须在组件库之前引入和注册
3. 必须引入 Element-UI 的样式文件

使用

完整引入

import Vue from 'vue'

// ⚠️ 重要：必须先引入 Element-UI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'  // 必须引入样式

// 然后引入组件库
import WiserComponents from 'wiser-components'

// 注册顺序：先注册 Element-UI，再注册组件库
Vue.use(ElementUI)        // 第一步：注册 Element-UI
Vue.use(WiserComponents)  // 第二步：注册组件库

⚠️ 注意：如果引入顺序错误，组件将无法正常渲染！

按需引入

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import { CheckBox } from 'wiser-components'

Vue.use(ElementUI)
Vue.component(CheckBox.name, CheckBox)

组件命名方式

组件支持两种命名方式：

PascalCase（推荐）：

<template>
  <LongCheckBox v-model="checked" :data-list="options" />
  <LongInput v-model="value" />
  <LongSelect v-model="selected" />
</template>

kebab-case：

<template>
  <long-check-box v-model="checked" :data-list="options" />
  <long-input v-model="value" />
  <long-select v-model="selected" />
</template>

两种方式都可以正常使用，组件会自动识别。

所有组件列表

| 组件名称 (PascalCase) | kebab-case | 说明 | |---------------------|------------|------| | LongInput | long-input | 输入框 | | LongSelect | long-select | 选择器 | | LongCheckBox | long-check-box | 复选框 | | LongRadio | long-radio | 单选框 | | LongNumberInput | long-number-input | 数字输入框 | | LongColorPicker | long-color-picker | 颜色选择器 | | LongGroup | long-group | 分组容器 | | LongUploader | long-uploader | 文件上传 | | LongVariableViewer | long-variable-viewer | 变量查看器 | | LongExcelViewer | long-excel-viewer | Excel 查看器 | | LongVariableViewerButton | long-variable-viewer-button | 变量查看器按钮 | | LongExcelViewerButton | long-excel-viewer-button | Excel 查看器按钮 |

开发

# 安装依赖
npm install

# 构建组件库
npm run build

# 开发模式（监听文件变化）
npm run dev

# 运行示例项目
npm run serve

组件

Button 按钮

常用的操作按钮。

基础用法

<template>
  <wiser-button>默认按钮</wiser-button>
  <wiser-button type="primary">主要按钮</wiser-button>
  <wiser-button type="success">成功按钮</wiser-button>
  <wiser-button type="warning">警告按钮</wiser-button>
  <wiser-button type="danger">危险按钮</wiser-button>
  <wiser-button type="info">信息按钮</wiser-button>
</template>

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|--------|--------| | type | 类型 | string | default/primary/success/warning/danger/info/text | default | | size | 尺寸 | string | medium/small/mini | medium | | disabled | 是否禁用 | boolean | — | false | | loading | 是否加载中 | boolean | — | false | | plain | 是否朴素按钮 | boolean | — | false | | round | 是否圆角按钮 | boolean | — | false | | circle | 是否圆形按钮 | boolean | — | false |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | click | 点击事件 | event |

License

MIT