# houui

> - 本项目仅作为vue组件库封装的练习参考

Latest version **0.5.0** (published 2021-06-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install houui
pnpm add houui
yarn add houui
bun add houui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.0 |
| Published | 2021-06-02 |
| First published | 2021-05-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| Author | 侯元珍 |
| Maintainers | houyuanzhen |
| Keywords | houui, HouUI |

## Links

- npm: https://www.npmjs.com/package/houui
- npm.io page: https://npm.io/package/houui

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [node-sass](https://npm.io/package/node-sass.md) ^5.0.0
- [sass-loader](https://npm.io/package/sass-loader.md) 10.1.1

## Recent versions

- 0.5.0 (latest) — 2021-06-02
- 0.1.9 — 2021-05-11
- 0.1.8 — 2021-05-11
- 0.1.7 — 2021-05-11
- 0.1.6 — 2021-05-11
- 0.1.5 — 2021-05-10
- 0.1.1 — 2021-05-07
- 0.1.0 — 2021-05-07

## README

- 本项目仅作为vue组件库封装的练习参考

- 初始化vue项目
    vue created demo

- 安装组件库
    npm i houui
    或者： yarn add houi

- 全局导入
    import HouUI form 'houui'
    import 'houui/dist/houui.css'

    Vue.use(HouUI)
    # UI组件库使用

#### button组件：

##### 参数支持
                                                  
| 参数名   | 参数描述                                                | 参数类型 | 默认    |
| -------- | ------------------------------------------------------- | -------- | ------- |
| type     | 按钮类型  (primary / success / warning / danger / info) | string   | default |
| plain    | 是否是朴素按钮                                          | boolean  | false   |
| round    | 是否是圆角按钮                                          | boolean  | false   |
| circle   | 是否是圆形按钮                                          | boolean  | false   |
| disabled | 是否禁用按钮                                            | boolean  | false   |
| icon     | 图标类名                                                | string   | 无      |

##### 方法

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

##### 使用方法
``` js
 <lm-button @click="buttonClick" disabled>default</lm-button>
 <lm-button type="info">info</lm-button>
 <lm-button type="success">success</lm-button>
 <lm-button type="danger">danger</lm-button>
 <lm-button type="primary">primary</lm-button>
 <lm-button type="warning">warning</lm-button>
```
#### dialog组件
##### 参数支持

| 参数名  | 参数描述                         | 参数类型 | 默认值 |
| ------- | -------------------------------- | -------- | ------ |
| title   | 对话框标题                       | string   | 提示   |
| width   | 宽度                             | string   | 50%    |
| top     | 与顶部的距离                     | string   | 15vh   |
| visible | 是否显示dialog（支持sync修饰符） | boolean  | false  |

##### 方法

| 事件名 | 事件描述         |
| ------ | ---------------- |
| opened | 模态框显示的事件 |
| closed | 模态框关闭的事件 |

##### 插槽说明

| 插槽名称 | 插槽描述           |
| -------- | ------------------ |
| default  | dialog的内容       |
| title    | dialog的标题       |
| footer   | dialog的底部操作区 |

##### 使用方法
``` js
 <lm-button @click="visible = true">展示dialog</lm-button>
 <lm-dialog title="提示" :visible.sync="visible">
   我是内容
   <template v-slot:footer>
     <lm-button>取消</lm-button>
     <lm-button type="primary">确定</lm-button>
   </template>
 </lm-dialog>
```
#### input组件

##### 参数支持
| 参数名称      | 参数描述                  | 参数类型 | 默认值 |
| ------------- | ------------------------- | -------- | ------ |
| placeholder   | 占位符                    | string   | 请输入 |
| type          | 文本框类型(text/password) | string   | text   |
| disabled      | 禁用                      | boolean  | false  |
| clearable     | 是否显示清空按钮          | boolean  | false  |
| show-password | 是否显示密码切换按钮      | boolean  | false  |
| name          | name属性                  | string   | 无     |

##### 方法

| 事件名称 | 事件描述       |
| -------- | -------------- |
| blur     | 失去焦点事件   |
| change   | 内容改变事件   |
| focus    | 获取的焦点事件 |

##### 使用方法
``` js
 <lm-input v-model="username" placeholder="请输入用户名"></lm-input>
```
 #### switch组件
 
 ##### 参数支持
 

| 参数名称      | 参数描述             | 参数类型 | 默认值  |
| ------------- | -------------------- | -------- | ------- |
| v-model       | 双向绑定             | 布尔类型 | false   |
| name          | name属性             | string   | text    |
| activeColor   | 自定义的激活的颜色   | string   | #3872F0 |
| inactiveColor | 自定义的不激活的颜色 | string   | #5582C2 |


##### 方法
      
| 事件名称 | 事件描述           |
| -------- | ------------------ |
| change   | change时触发的事件 |

##### 使用方法
``` js
  <lm-switch v-model="active"></lm-switch>
```
#### radio组件
##### 参数支持

| 参数名称 | 参数描述        | 参数类型            | 默认值 |
| -------- | --------------- | ------------------- | ------ |
| v-model  | 双向绑定        | 布尔类型            | false  |
| label    | 单选框的value值 | string，num,boolean | ' '    |
| name     | name属性        | string              |

##### 使用方法
```js 
 <lm-radio label="1" v-model="gender">男</lm-radio>
 <lm-radio label="0" v-model="gender">女</lm-radio>
```

#### radio-group组件
使用radio组件的缺点，需要给每个组件都丙丁v-model，可以使用radio-group包裹
##### 使用方法
```js 

<lm-radio-group v-model="gender">
    <lm-radio label="1">男</lm-radio>
    <lm-radio label="0">女</lm-radio>
</lm-radio-group>
```
#### checkbox组件
##### 参数支持

| 参数名称 | 参数描述        | 参数类型            | 默认值 |
| -------- | --------------- | ------------------- | ------ |
| v-model  | 双向绑定        | 布尔类型            | false  |
| label    | 单选框的value值 | string，num,boolean | ' '    |
| name     | name属性        | string              |
##### 使用方法
``` js
<lm-checkbox v-model="checked">是否选中</lm-checkbox>
```
#### checkboxGroup组件

使用checkbox-group组件包裹checkbox

##### 使用方法
``` js
 <lm-checkbox-group v-model="hoby">
    <lm-checkbox label="香蕉"></lm-checkbox>
    <lm-checkbox label="苹果"></lm-checkbox>
    <lm-checkbox label="火龙果"></lm-checkbox>
  </lm-checkbox-group>
```

#### form组件
##### 使用方法
``` js
 <lm-form :model="formData" label-with="100px">
    <lm-form-item label="用户名">
      <lm-input placeholder="请输入用户名" name="username"></lm-input>
    </lm-form-item>
  </lm-form>
```

---
_Source: https://npm.io/package/houui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._