CosyUI 使用指南
0.简介
这是一个基于vue框架的ui组件库——CosyUI。相信这个组件库能帮您快速构建前端项目。
- 本库暂时只支持以下组件:
- Alert
- Message
- Dialog
- Tip
- 其余功能后续完善,欢迎前端开发爱好者加入,共同打造一套追求完美的UI框架。
- 作者WeChat: 809742006,目前正在求职,欢迎抛出您珍贵的橄榄枝。
1.安装
我们推荐使用npm安装,它能与主流打包工具webpack结合使用.
$ npm i cosy-ui
2.快速上手
我们为您提供了以下多种使用方式:
a. 整体引入
- 您可以将整个CosyUI都进入到您的项目中,随时随地调用Cosy组件。
- 在入口文件中写入:
Vue;
b. 按需引入
- 您可以根据自己的需求,通过插件或组件的模式将所需的UI组件单个引入到您的项目中,从而减少打包体积。
插件模式
; ; Vue; Vue; ;
组件模式
; ; Vue; Vue; ;
- 当然,如果按需引入的UI组件较多,我们也为您提供了便捷引入组件的方式,大大省去您频繁多次注册的麻烦。
插件便捷模式
; 'Alert' 'Button' 'Switch' 'Tree' 'Message'; ;
组件便捷模式
; 'Alert' 'Button' 'Switch' 'Tree' 'Message'; ;
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