CosyUI 使用指南

0.简介

这是一个基于vue框架的ui组件库——CosyUI。相信这个组件库能帮您快速构建前端项目。

• 本库暂时只支持以下组件:
  • Alert
  • Message
  • Dialog
  • Tip
• 其余功能后续完善，欢迎前端开发爱好者加入，共同打造一套追求完美的UI框架。
• 作者WeChat: 809742006，目前正在求职，欢迎抛出您珍贵的橄榄枝。

1.安装

我们推荐使用npm安装，它能与主流打包工具webpack结合使用.

$ npm i cosy-ui

2.快速上手

我们为您提供了以下多种使用方式:

a. 整体引入

• 您可以将整个CosyUI都进入到您的项目中，随时随地调用Cosy组件。
  • 在入口文件中写入：

      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组件单个引入到您的项目中，从而减少打包体积。

插件模式

    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');

组件模式

    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组件较多，我们也为您提供了便捷引入组件的方式，大大省去您频繁多次注册的麻烦。

插件便捷模式

    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');

组件便捷模式

    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: [email protected]