1.0.0 • Published 4 years ago
cosyui v1.0.0
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: 809742006@qq.com
1.0.0
4 years ago