cre-ui文档版本：v-1.0.25一、组件库介绍组件库地址：https://www.npmjs.com/package/cre-ui组件库cre-ui基于Vue2。6.11实施。组件库的使用有两种方式：全量导入和按需导入。组件库安装npmicre-ui--savefullimportimportVuefrom"vue";importCreUifrom"cre-ui";//需要引入全局样式表import"cre-ui/lib/theme-chalk/index.css";Vue.use(CreUi);importVuefrom"vue";import{Component1,Component12,Component3}from"cre-ui";//importstyleimport"cre-ui/lib/theme-chalk/component1.css";//...const组件=[Component1,Component12,Component3];components.forEach((component)=>{Vue.use(component);});2.组件详情buildname均以cre-开头，使用规则与element-ui类似。1、当IePage不兼容ie浏览器环境时，显示页面示例：IePageAttributes参数描述类型可选值默认值content-text错误主要内容（必填）String----content-tip提示信息String----logologo完整路径String----content-foot底部版权信息String----theme-color主题颜色String--#42bdd8content-bg主要提示内容背景图片Spring--http://pic-cdn-dev.creality.com//iePageIcon/ie-title-icon-2.png2.Pagination分页组件示例：PaginationAttributes参数描述类型可选值默认值页码数--1page-size每页数据数Number--20数据总数Number--0hide-on-single-page有时是否隐藏isonlyonepageBooleantrue/falsetruePaginationEvent事件名称说明回调参数pageChange页码变化时触发当前页码page的值3.ImageZoom图片缩放组件，如果指定了video-src属性，则可以播放视频Example:ImageZoomAttributes参数描述类型optionalValue默认值url图片完整路径String----放大后显示的big-url图片String--默认等于url比例放大倍数的值Number--1.5scroll-disabled放大时是否禁用页面滚动Booleantrue/falsefalsevideo-srcvideo全路径String----width图片宽度String/Number--500height图片高度String/Number--5004。定时器倒计时组件，样式需要自定义示例：定时器属性参数描述类型可选值默认值init-time计时秒数（必填）Number----localelanguageStringzh/enzhTimerEvent事件名称描述回调参数timerEnd倒计时结束时触发--5．BackTop返回顶部按钮示例：BackTop属性参数说明类型可选值默认值edge边界值页面滚动距离占页面总高度的比例Number--0.5right按钮之间的距离andtherightedgeofthepageString/Number--100bottom按钮与页面底部边缘的距离String/Number--1806。评论组件示例：评论属性参数说明类型可选值默认值评论评论对象，包括：内容（字符串）内容、图片（数组）)pictures,specification(array)skuList,time(number)createTimeObject:{content:"",图片:[],skuList:[{key:'',value:''}],createTime:}----userInfoPoster{nickName,avatar,userId}Object----localelanguageStringzh/enzhCommentSlotnamedescriptioncreateTimeCommenttime:By默认，2004-09-1100:00:00用于输出rotateLeft大图和左旋转图标rotateReft大图和旋转图标7.折叠大下拉框组件示例：我是按钮我是下拉框的内容
折叠属性参数描述类型可选值默认值宽度下拉框宽度Number/String--200高度下拉框heightNumber/String--200trigger触发方式Stringhover/clickhoverplacement显示位置Stringleft/rightleftangle-Space尖角到边缘的距离Number/String--24CollapseSlotsname表示挂载的元素在入口下拉框中，通常是按钮主体下拉框内容容器CollapseEvents事件名称描述回调参数onOpen在下拉框展开时触发--onClose下拉框关闭时触发--8.TagList标签列表示例：TagList属性参数描述类型可选值默认值label标签标签文本String--大家都在说：tagList包含了标签列表id和name属性数组--[]activeId选中的标签id（默认选择列表中的第一个）Number----TagList属性事件描述回调参数tagClick点击标签回调标签对象9.Input输入框示例：参数说明类型可选值默认值value/v-model绑定输入值String/Number----widthwidthString/Number--600占位符提示文字String--请填写内容maxlengthInputstringlengthNumber--100typeNativeinputtypeStringtext/number/passwordtextdisabled是否禁用Booleantrue/falsefalsereadonly是否只读Booleantrue/falsefalseInputEvent事件描述回调参数变化触发当前输入值10.Textarea文本区example:Textarea属性参数描述类型可选值默认值value/v-model绑定输入值String----占位符提示文字弦乐se填写内容widthString/Number--600rows行数Number--5maxlength最大输入长度Number--200disabled是否禁用Booleantrue/falsefalsereadonly是否只读Booleantrue/falsefalseresize是否可以更改大小Booleantrue/falsefalseTextarea事件事件说明输入当前输入时触发回调参数改变value11.Select选择框示例：SelectAttributes参数描述类型可选值默认值value/v-modelbindingselectedvalueString/Number----options选项列表Array(含{label,value})----widthwidthString/Number--500placeholderprompttextString--pleaseselectclearableClearoptionBooleantrue/falsefalsedisabled是否禁用Booleantrue/falsefalsenameinput原生名称属性String----filterable是否可搜索Booleantrue/falsefalsefilterMethod自定义搜索方法Function--undefinedloading是否加载Booleantrue/falsefalsenoMatchText搜索条件不匹配时显示的文本String--无匹配数据defaultFirstOption中回车输入框选择第一个匹配项需要和filterable一起使用Booleantrue/falsefalsepopperAppendToBody是否将弹出框插入到body元素中Booleantrue/falsefalseautomaticDropdown对于不可搜索的Select，输入框获得焦点后是否自动弹出选项菜单Booleantrue/falsefalseSelectEvent事件描述回调parameterchange触发当前optionoption12的值。checkbox例子：Checkbox属性参数说明typeoptionalValue默认值value/v-model绑定值Booleantrue/falsefalselabeltextString----typeUItypeStringnormal/boxnormalCheckboxEvent事件名称描述选中状态切换时触发回调参数变化13.CheckboxGroup复选框组示例：导入样式dependenciesasneeded:@import'cre-ui/lib/theme-chalk/checkbox.css'CheckboxGroupAttributesparameterdescriptiontypeoptionalvalue默认值value/v-model绑定值，选择的选项值列表数组（元素为String/Number）aa[]options选项列表数组(元素为{label,value})aa[]CheckboxGroupEvent事件名称描述回调参数改变时触发当前选中选项的值列表切换选中状态时14.RadioGroup单选按钮组示例：RadioGroupAttributes参数描述类型optionalvalue默认值value/v-model绑定值,valueString/Numberoftheselectedoption----options选项列表数组（元素为{label,value})--[]RadioGroupEvent事件名称说明切换选项时回调参数变化触发当前选中选项的值引入样式依赖：@import'cre-ui/lib/theme-chalk/select.css'DatepickerAttributes参数说明类型optionalvaluedefaultvaluevalue日期绑定值，自动同步需要添加syncObject({year,month,date})----DatepickerEvent事件名称描述回调参数更改年/月/日当前选中日期被选中时触发16、图片显示示例：ImageAttributes参数说明type可选值defaultvaluesrc图片地址String----width图片宽度String/Number--80height图片高度String/Number--80fit决定图片如何适应容器框架，同原生对象-fitStringfill/contain/cover/none/scale-downcoveraltnativealtString----lazy是否开启延迟加载Booleantrue/falsefalsescrollContainer开启延迟加载后监听滚动事件的容器String/HTMLElement--auto或scroll父元素最后一次溢出值defaultSrc占位图片地址String--加载失败时errorSrc图片地址String----17.ImagesPreview图片放大预览组件示例：ImageAttributes参数描述类型可选值默认值imageList图片地址列表Array--[]imageSize显示图片size(pixel)String/Number--140previewSize放大图片尺寸(pixels)String/Number--400localelanguageStringzh/enzh18.ImageUpload图片上传示例：根据需要导入样式依赖：@import'cre-ui/lib/theme-chalk/image.css'ImageUploadAttributes参数说明typeoptionalvaluedefaultvaluelimit最大上传文件数Number--3sizeLimit上传文件大小限制Number--510241024imageSize显示图片大小String/Number--80previewSize放大预览图片大小String/Number--600LocalelanguageStringzh/enzhImageUpload事件名称说明回调参数onFilesChangefile列表变化时触发当前选中图片的文件列表19.Dialog弹窗组件示例：DialogAttributes参数说明typeoptionalvalue默认值visible是否显示Booleantrue/falsetitletitleString--提示宽度widthString/Number--520heightheightString/Number--280buttonWidth按钮宽度String/Number--88buttonHeight按钮高度String/Number--36confirmButtonTextConfirmbuttontextString--ConfirmcancelButtonTextCancelbuttontextString--CancelDialogSlotname主体窗口内容的描述DialogEvents事件名称描述Callbackparameterconfirm当点击确定按钮时触发--cancel当点击取消按钮时触发--20.MessageDialog消息弹窗示例：根据需要引入样式依赖：@import'cre-ui/lib/theme-chalk/dialog.css'MessageDialogAttributes参数说明type可选值默认值visible是否显示BooleanTrue/falsefalsetitletitleString--提示信息内容String-----confirmButtonText确认按钮文本String--确认cancelButtonText取消按钮文本String--CancelMessageDialogEvents事件名称说明回调参数confirm在点击确定按钮时触发--cancel在点击取消按钮时触发--21.留言置顶弹窗提示介绍：importVuefrom'vue'import{Message}from'cre-ui'Vue.prototype.$message=Message使用：//this.$message.info('提示信息')this.$in钩子函数message.warning('warningmessage')this.$message.success('successmessage')this.$message.error('errormessage')22.Breadcrump示例：BreadcrumpAttribute参数描述类型可选值默认值列表breadcrumblistArray(元素为{name,path})--[]附录项目维护相关Projectsetupnpminstallcd.\packages\theme-chalknpminstallcd..\..\编译和热重载用于开发npmrunservepackage整体包npmrundistclean旧版本包文件npmrunclean生成src/index.js文件npmrunbuild:file包样式文件npmrunbuild:themeLints和修复文件npmrunlint
