# cosyui

> 一款基于VUE的组件框架,我们追求完美,期待您的加入

Latest version **1.0.0** (published 2020-01-05) · ISC license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-01-05 |
| First published | 2020-01-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 97.4 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | yuhua |
| Maintainers | yuhua |
| Keywords | vue, cosy, 组件框架, ui |

## Links

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

## Dependencies (1)

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

## 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

- 1.0.0 (latest) — 2020-01-05

## README

### CosyUI 使用指南
#### 0.简介
这是一个基于vue框架的ui组件库——CosyUI。相信这个组件库能帮您快速构建前端项目。
- 本库暂时只支持以下组件:
    - Alert
    - Message
    - Dialog
    - Tip
- 其余功能后续完善，欢迎前端开发爱好者加入，共同打造一套追求完美的UI框架。
- 作者WeChat: 809742006，目前正在求职，欢迎抛出您珍贵的橄榄枝。
#### 1.安装
我们推荐使用npm安装，它能与主流打包工具webpack结合使用.
> $ npm i cosy-ui

#### 2.快速上手
我们为您提供了以下多种使用方式:
##### a. 整体引入
- 您可以将整个CosyUI都进入到您的项目中，随时随地调用Cosy组件。
    - 在入口文件中写入：
    ```js
        import Vue from 'vue'
        import App from 'App.vue'
        import CosyUI from 'cosy'
        Vue.use(CosyUI);

        new Vue({
            render: h => h(App)
        }).$mount('#app')
    ```

##### b. 按需引入
- 您可以根据自己的需求，通过插件或组件的模式将所需的UI组件单个引入到您的项目中，从而减少打包体积。

###### 插件模式
```js
    import Vue from 'vue';
    import App from 'App.vue'
    import { Alert, Button } from 'cosy';

    Vue.use(Alert);
    Vue.use(Button);

    new Vue({
        render: h => h(App)
    }).$mount('#app');
```

###### 组件模式
```js
    import Vue from 'vue';
    import App from 'App.vue'
    import { Alert, Button } from 'cosy';

    Vue.component(Alert.name, Alert);
    Vue.component(Button.name, Button);

    new Vue({
        render: h => h(App)
    }).$mount('#app');
```

- 当然，如果按需引入的UI组件较多，我们也为您提供了便捷引入组件的方式，大大省去您频繁多次注册的麻烦。
###### 插件便捷模式
```js
    import Vue from 'vue';
    import App from 'App.vue'
    import {pluginsInstall} from 'cosy'
    pluginsInstall(Vue)(['Alert', 'Button', 'Switch', 'Tree', 'Message']);

    new Vue({
        render: h => h(App)
    }).$mount('#app');
```
###### 组件便捷模式
```js
    import Vue from 'vue';
    import App from 'App.vue'
    import {componentsInstall} from 'cosy'
    componentsInstall(Vue)(['Alert', 'Button', 'Switch', 'Tree', 'Message']);

    new Vue({
        render: h => h(App)
    }).$mount('#app');
```

#### 3. 使用
##### Alert提示
>在页面中较为明显地展示重要的提示信息

- API
    - 属性

    | 名称 | 类型 | 默认值 | 说明 |
    |----|----|----|----|
    | title | String | '--' | 提示标题,支持html |
    | type | String | 'info' | 提示框的种类，包含"普通提示info"，"成功提示success"，"警告提示warning"，"错误提示error" |
    | hollow | Boolean | false | 是否为空心样式 |
    | icon | Boolean | false | 是否显示对应图标，目前仅支持布尔类型，未来可支持字符串类型，即自定义图标 |
    | titleAlign | String | 'left' | 标题位置，支持left、center、right三种模式 |
    | closeText | String | '×' | 关闭按钮可替换成任意字符串内容，比如"朕已阅"、"知道了"等等 |

    - 事件

    | 名称 | 类型  | 说明 |
    |----|----|----|
    | close | Function | 关闭按钮时触发的函数 |

    - slot
    
    > 可在Alert标签内部写任意内容，会插入至提示框标题下方。

##### Message
>消息提示弹层，作用域页面可视区。

- API
    - options
    > 支持对象和字符串形式。如果为对象，则可使用下表中的属性。若为字符串，则只显示提示弹层只显示内容。

    - options为对象时支持的属性

    | 名称 | 类型 | 默认值 | 说明 |
    |----|----|----|----|
    | title | String | '' | 提示弹层的标题,支持html |
    | content | String | '' | 提示弹层的内容,支持html |
    | duration | Number | '' | 提示弹层的小时时间，即duration毫秒后自动消失，若值为0，则永不消失，需手动关闭 |
    | position | String | '' | 提示弹层的在可视区的位置，可选值包含"左侧left"、"中间center"、"右侧right" |
    | closeText | String | '×' | 关闭按钮可替换成任意字符串内容，比如"朕已阅"、"知道了"等等 |
    | titleIcon | Boolean | false | 标题左侧的图标,目前仅支持布尔类型，未来可支持字符串类型，即自定义图标 |
    | contentIcon | Boolean | false | 内容左侧的图标,目前仅支持布尔类型，未来可支持字符串类型，即自定义图标;建议只显示内容时使用。 |
    | hollow | Boolean | false | 是否为空心样式 |

    - 方法

    | 名称 | 类型 | 默认值 | 说明 | 举例 |
    |----|----|----|----|----|
    | type | String | 'info' | 消息提示弹层的种类，包含"普通提示弹层info"，"成功提示弹层success"，"警告提示弹层warning"，"错误提示弹层error" | this.$message.info(options)，此处的options就是上表的属性的集合 |

##### Dialog

- API
    - options
    > 支持对象类型。可使用下表中的属性

    - options支持的属性
    
    | 名称 | 类型 | 默认值 | 说明 |
    |----|----|----|----|
    | title | String | '标题' | 对话框的标题,支持html |
    | content | String | '这是一段内容' | 对话框的内容,支持html |
    | component | Vue Component | undefined | 对话框的内容，支持组件形式插入，component优先级高于content，同时出现，只显示component |
    | data | Function | () => {return {}} | 传入值component中的数据，与component原有数据混合，绑定在component实例上，可以跟正常属性一样使用,比如有属性a,在html中则直接使用a，在js中使用this.a |
    | buttonType | Number | 2 | 对话框的底部按钮个数，值为0表示不显示按钮，值为1表示只显示取消按钮，值为2表示显示取消和确定按钮 |
    | width | String | '500px' | 对话框的宽度 |

    - 方法

    | 名称 | 类型 | 默认值 | 说明 | 举例 |
    |----|----|----|----|----|
    | sureBefore | Function | (componentData) => {} | 点击确定前触发的函数，参数为component组件中this.$co_res_data的赋值 | 传入的conponent中this.$co_res_data = 20,则点击确定前，会将20传入componentData |
    | sureAfter | Function | (componentData) => {} | 点击确定后触发的函数，参数为component组件中this.$co_res_data的赋值 | 传入的conponent中this.$co_res_data = 20,则点击确定后，会将20传入componentData |   


##### Tip

- API
    - 属性

    | 名称 | 类型 | 默认值 | 说明 |
    |----|----|----|----|
    | position | String | 'top' | tip展示的十二大方位，值小写。值有"上左top-left"，"上top"，"上右top-right"，"左上left-top"，"右上right-top"，"左left"，"右right"，"左下left-bottom"，"右下right-bottom"，"下左bottom-left"，"下bottom"，"下右bottom-right" |
    | content | String | '' | Tip的内容，暂时支持纯文本，后续会支持html等 |
    | forceControl | Boolean,undefined | undefined | 支持Tip动态(强制)关闭开启tip，不可与延迟一起使用,并且移入移出将失效 |
    | arrowHide | Boolean | false | 支持Tip动态(强制)隐藏箭头 |
    | delayOpen | Number | 0 | 支持Tip延迟一段时间(单位：毫秒)后显示，值为0则忽略该属性 |
    | arrowHide | Number | 0 | 支持Tip延迟一段时间(单位：毫秒)后隐藏，值为0则忽略该属性 |

#### 4.感谢与邀请
尊敬的使用者：
    您好！
感谢您下载并安装本UI组件库，希望您使用愉快。如若在使用过程中，有所建议或意见，欢迎沟通。
另外，我们也真诚邀请您加入本库开发者行列，大家一道打造一款不断追求完美的UI组件库。

开发者 俞华
WeChat: 809742006
Email: 809742006@qq.com

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