# cwx-ui

> UI组件库

Latest version **0.3.1** (published 2020-09-06) · 0 weekly downloads

## Install

```sh
npm install cwx-ui
pnpm add cwx-ui
yarn add cwx-ui
bun add cwx-ui
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2020-09-06 |
| First published | 2020-09-06 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | 陈文雄 |
| Maintainers | chen-wx299 |
| Keywords | vue, ui, cwx-ui |

## Links

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

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.5

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.3.1 (latest) — 2020-09-06
- 0.2.0 — 2020-09-06
- 0.1.0 — 2020-09-06

## README

+ 初始化vue项目

```
vue create demo
```

+ 安装组件库

```js
yarn add cwx-ui
npm install cwx-ui
```

+ 全局导入

```js
import CwxUI from 'cwx-ui'
// 引入字体图标样式
import '...'

Vue.use(CwxUI)
```

+ 使用组件

```html
<template>
  <div id="app">
    <c-button type="success" @click="visible=true">显示登录框</c-button>
    <c-dialog title="用户登录" :visible.sync="visible" width="30%">
      <c-form :model="model" label-width="80px">
        <c-form-item label="用户名">
          <c-input v-model="model.username" placeholder="请输入用户名" clearable></c-input>
        </c-form-item>
        <c-form-item label="用户密码">
          <c-input v-model="model.password" placeholder="请输入用户密码" show-password></c-input>
        </c-form-item>
        <c-form-item label="即时配送">
          <c-switch v-model="model.soon" active-color="green" inactive-color="red"></c-switch>
        </c-form-item>
        <c-form-item label="爱好">
          <c-checkbox-group v-model="model.hobby">
            <c-checkbox label="篮球"></c-checkbox>
            <c-checkbox label="足球"></c-checkbox>
            <c-checkbox label="乒乓球"></c-checkbox>
          </c-checkbox-group>
        </c-form-item>
        <c-form-item label="性别">
          <c-radio-group v-model="model.gender">
            <c-radio label="1">男</c-radio>
            <c-radio label="0">女</c-radio>
          </c-radio-group>
        </c-form-item>
      </c-form>
      <template v-slot:footer>
        <c-button type="primary" @click="login">登录</c-button>
        <c-button @click="visible=false">取消</c-button>
      </template>
    </c-dialog>
  </div>
</template>
```

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