cre-ui文档

cre-ui 文档

版本：v-1.0.25

一、组件库介绍

组件库地址: https://www.npmjs.com/package/cre-ui

组件库 cre-ui 基于 Vue2.6.11 实现。组件库的使用分为全量引入和按需引入两种方式。

• 组件库安装

npm i cre-ui --save

• 全量引入

import Vue from "vue";
import CreUi from "cre-ui";
// 需引入全局样式表
import "cre-ui/lib/theme-chalk/index.css";

Vue.use(CreUi);

• 按需引入

import Vue from "vue";
import { Component1, Component12, Component3 } from "cre-ui";
// 按需引入样式
import "cre-ui/lib/theme-chalk/component1.css";
// ...

const components = [Component1, Component12, Component3];
components.forEach((component) => {
  Vue.use(component);
});

二、组件详情

组建名称均以 cre-开头，使用规则类似 element-ui。

1. IePage

不兼容 ie 浏览器环境时展示页面

例：

<cre-ie-page
  content-text="网站暂时不支持IE浏览器，请改用其他浏览器访问。"
  content-tip="我是提示信息"
  logo="http://mall-dev.crealitygroup.com/_nuxt/img/29dc86f.png"
  content-foot="我是底部版权信息"
  theme-color="#cca558"
  content-bg="http://pic-cdn-dev.creality.com//iePageIcon/ie-title-icon-2.png"
/>

IePage Attributes

参数	说明	类型	可选值	默认值
content-text	错误主要内容(必填)	Sring	--	--
content-tip	提示信息	Sring	--	--
logo	logo 完整路径	Sring	--	--
content-foot	底部版权信息	Sring	--	--
theme-color	主题色	Sring	--	#42bdd8
content-bg	主要提示内容背景图	Sring	--	http://pic-cdn-dev.creality.com//iePageIcon/ie-title-icon-2.png

2. Pagination

分页组件

例：

<cre-pagination
  :page="1"
  :page-size="10"
  :total="100"
  :hide-on-single-page="true"
/>

Pagination Attributes

参数	说明	类型	可选值	默认值
page	页码	Number	--	1
page-size	每页数据条数	Number	--	20
total	数据总条数	Number	--	0
hide-on-single-page	是否在只有一页时隐藏	Boolean	true/false	true

Pagination Event

事件名称	说明	回调参数
pageChange	页码变化时触发	当前页码 page 的值

3. ImageZoom

图片放大组件，若指定 video-src 属性可播放视频

例：

<cre-image-zoom
  url="http://pic-cdn-dev.creality.com/vip_mall/2d1aae3d-fb6c-4570-8782-9af131692f37"
  :cale="2"
  :scroll-disabled="true"
  video-src="http://video-cdn-dev.creality.com/vip_mall/cb262684-a211-4c07-a759-e90f9a64eb13"
  width="400"
  height="400"
/>

ImageZoom Attributes

参数	说明	类型	可选值	默认值
url	图片完整路径	String	--	--
big-url	放大后显示的图片	String	--	默认等于 url 的值
scale	放大倍数	Number	--	1.5
scroll-disabled	放大时是否禁用页面滚动	Boolean	true/false	false
video-src	视频完整路径	String	--	--
width	图片宽度	String/Number	--	500
height	图片高度	String/Number	--	500

4. Timer

倒计时组件，样式需要自定义

例：

<cre-timer :init-time="120" :locale="en" />

Timer Attributes

参数	说明	类型	可选值	默认值
init-time	计时秒数(必填)	Number	--	--
locale	语言	String	zh / en	zh

Timer Event

事件名称	说明	回调参数
timerEnd	倒计时结束时触发	--

5. BackTop

回到顶部按钮

例：

<cre-back-top />

BackTop Attributes

参数	说明	类型	可选值	默认值
edge	页面滚动距离占页面总高度比例的边界值	Number	--	0.5
right	按钮与页面右边缘的距离	String/Number	--	100
bottom	按钮与页面下边缘的距离	String/Number	--	180

6. Comment

评论组件

例：

<cre-comment-item :user-info="userInfo" :comment="comment" />

Comment Attributes

参数	说明	类型	可选值	默认值
comment	评论对象，包含: 内容 (string) content，图片(array) pictures，规格 (array) skuList，时(number) createTime	Object: { content: ”“, Pictures: [], skuList: [{key:'',value:''}], createTime: }	--	--
userInfo	发表人{ nickName，avatar，userId }	Object	--	--
locale	语言	String	zh / en	zh

Comment Slot

name	说明
createTime	评论时间： 默认以 2004-09-11 00:00:00输出
rotateLeft	大图左旋转图标
rotateReft	大图又旋转图标

7. Collapse

大下拉框组件

例：

<cre-collapse width="300" height="300" trigger="hover">
  <template slot="entry">
    <el-button>我是按钮</el-button>
  </template>
  <template slot="body">
    <div>我是下拉框内容</div>
  </template>
</cre-collapse>

Collapse Attributes

参数	说明	类型	可选值	默认值
width	下拉框宽度	Number/String	--	200
height	下拉框高度	Number/String	--	200
trigger	触发方式	String	hover/click	hover
placement	显示位置	String	left/right	left
angle-space	尖角离边缘距离	Number/String	--	24

Collapse Slots

name	说明
entry	下拉框所挂载的元素，通常为按钮
body	下拉框内容容器

Collapse Events

事件名称	说明	回调参数
onOpen	下拉框展开时触发	--
onClose	下拉框收起时触发	--

8. TagList

标签列表

例：

<cre-tag-list :tag-list="tagList" @tagClick="tagClick" />

TagList Attributes

参数	说明	类型	可选值	默认值
label	标签label文本	String	--	大家都在说：
tagList	包含id, name属性的标签列表	Array	--	[]
activeId	被选中的标签id(默认列表第一个为选中)	Number	--	--

TagList Attributes

事件	说明	回调参数
tagClick	点击标签回调	tag对象

9. Input

输入框

例：

<cre-input v-model="inputValue" :width="200" />

参数	说明	类型	可选值	默认值
value/v-model	绑定输入值	String/Number	--	--
width	宽度	String/Number	--	600
placeholder	提示文字	String	--	请填写内容
maxlenghth	最大输入字符串长度	Number	--	100
type	原生输入类型	String	text/number/password	text
disabled	是否禁用	Boolean	true/false	false
readonly	是否只读	Boolean	true/false	false

Input Event

事件	说明	回调参数
change	输入时触发	当前输入值

10. Textarea

文本域

例：

<cre-textarea v-model="textAreaValue" width="500" rows="4" />

Textarea Attributes

参数	说明	类型	可选值	默认值
value/v-model	绑定输入值	String	--	--
placeholder	提示文字	String	--	请填写内容
width	宽度	String/Number	--	600
rows	行数	Number	--	5
maxlenghth	最大输入长度	Number	--	200
disabled	是否禁用	Boolean	true/false	false
readonly	是否只读	Boolean	true/false	false
resize	是否可改变大小	Boolean	true/false	false

Textarea Event

事件	说明	回调参数
change	输入时触发	当前输入值

11. Select

选择框

例：

<cre-select
  v-model="selectValue"
  :options="selectOptions"
  filterable
  clearable
  @change="selectChange"
/>

Select Attributes

参数	说明	类型	可选值	默认值
value/v-model	绑定选中值	String/Number	--	--
options	选项列表	Array(包含 {label, value})	--	--
width	宽度	String/Number	--	500
placeholder	提示文字	String	--	请选择
clearable	是否可清空选项	Boolean	true/false	false
disabled	是否禁用	Boolean	true/false	false
name	input	原生name属性	String	--	--
filterable	是否可搜索	Boolean	true/false	false
filterMethod	自定义搜索方法	Function	--	undefined
loading	是否在加载中	Boolean	true/false	false
noMatchText	搜索条件无匹配时显示的文字	String	--	无匹配数据
defaultFirstOption	在输入框按下回车，选择第一个匹配项。需配合 filterable 使用	Boolean	true/false	false
popperAppendToBody	是否将弹出框插入至 body 元素	Boolean	true/false	false
automaticDropdown	对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单	Boolean	true/false	false

Select Event

事件	说明	回调参数
change	选中选项时触发当前	选项option的value值

12. Checkbox

复选框

例：

<cre-checkbox
  v-model="checkboxValue"
  label="我是Checkbox"
  type="box"
  @change="handleCheckboxChange"
/>

Checkbox Attributes

参数	说明	类型	可选值	默认值
value/v-model	绑定值	Boolean	true/false	false
label	文字	String	--	--
type	UI类型	String	normal/box	normal

Checkbox Event

事件名称	说明	回调参数
change	切换选中状态时触发	当前是否选中

13. CheckboxGroup

复选框组

例：

<cre-checkbox-group
  v-model="checkboxGroupValue"
  :options="checkboxGroupOptions"
  @change="handleCheckboxGroupChange"
/>

按需引入样式依赖：

@import 'cre-ui/lib/theme-chalk/checkbox.css'

CheckboxGroup Attributes

参数	说明	类型	可选值	默认值
value/v-model	绑定值，选中选项的value列表	Array(元素为String/Number)	aa	[]
options	选项列表	Array(元素为{label, value})	aa	[]

CheckboxGroup Event

事件名称	说明	回调参数
change	切换选中状态时触发	当前选中选项的value列表

14. RadioGroup

单选按钮组

例：

<cre-radio-group v-model="radioValue" :options="radioOptions" />

RadioGroup Attributes

参数	说明	类型	可选值	默认值
value/v-model	绑定值，选中选项的value	String/Number	--	--
options	选项列表	Array(元素为{label, value})	--	[]

RadioGroup Event

事件名称	说明	回调参数
change	切换选项时触发	当前选中选项的value

15. Datepicker

日期选择

例：

<cre-datepicker
  :value.sync="dateValue"
  @change="handleDatepickerChange"
/>

按需引入样式依赖：

@import 'cre-ui/lib/theme-chalk/select.css'

Datepicker Attributes

参数	说明	类型	可选值	默认值
value	日期绑定值，需要自动同步需要加sync	Object({ year, month, date })	--	--

Datepicker Event

事件名称	说明	回调参数
change	年/月/日选中项变化时触发	当前选中日期

16. Image

图片展示

例：

<cre-image
  src="http://pic-cdn-dev.creality.com/vip_mall/03218e36-9feb-4662-8a89-83533b6af5f7"
  width="200"
  height="200"
/>

Image Attributes

参数	说明	类型	可选值	默认值
src	图片地址	String	--	--
width	图片宽度	String/Number	--	80
height	图片高度	String/Number	--	80
fit	确定图片如何适应容器框，同原生 object-fit	String	fill / contain / cover / none / scale-down	cover
alt	原生alt	String	--	--
lazy	是否开启懒加载	Boolean	true / false	false
scrollContainer	开启懒加载后，监听 scroll 事件的容器。	String/HTMLElement	--	最近一个 overflow 值为 auto 或 scroll 的父元素
defaultSrc	占位图片地址	String	--	--
errorSrc	加载失败时图片地址	String	--	--

17. ImagesPreview

图片放大预览组件

例：

<cre-images-preview
  :image-list="[
    'http://pic-cdn-dev.creality.com/vip_mall/20c1336c-6a64-4ab7-8833-b06496ebee31',
    'http://pic-cdn-dev.creality.com/vip_mall/f00d9e5d-307d-47eb-a7da-b4f4e54644fa'
  ]"
/>

Image Attributes

参数	说明	类型	可选值	默认值
imageList	图片地址列表	Array	--	[]
imageSize	展示图片大小（像素）	String / Number	--	140
previewSize	放大图片大小（像素）	String / Number	--	400
locale	语言	String	zh / en	zh

18. ImageUpload

图片上传

例：

<cre-image
  src="http://pic-cdn-dev.creality.com/vip_mall/03218e36-9feb-4662-8a89-83533b6af5f7"
  width="200"
  height="200"
/>

按需引入样式依赖：

@import 'cre-ui/lib/theme-chalk/image.css'

ImageUpload Attributes

参数	说明	类型	可选值	默认值
limit	最大上传文件数	Number	--	3
sizeLimit	上传文件大小限制	Number	--	5 1024 1024
imageSize	展示图片大小	String / Number	--	80
previewSize	放大预览图大小	String / Number	--	600
locale	语言	String	zh / en	zh

ImageUpload Event

事件名称	说明	回调参数
onFilesChange	文件列表变化时触发	当前选中图片的文件列表

19. Dialog

弹窗组件

例：

<cre-dialog
  :visible.sync="addressDialogVisible"
  width="659"
  height="511"
  title="添加收货地址"
  confirm-button-text="保存新地址"
  button-width="160"
  button-height="48"
/>

Dialog Attributes

参数	说明	类型	可选值	默认值
visible	是否显示	Boolean	true / false	false
title	标题	String	--	提示
width	宽度	String / Number	--	520
height	高度	String / Number	--	280
buttonWidth	按钮宽度	String / Number	--	88
buttonHeight	按钮高度	String / Number	--	36
confirmButtonText	确定按钮文字	String	--	确定
cancelButtonText	取消按钮文字	String	--	取消

Dialog Slot

name	说明
body	窗口中的内容

Dialog Events

事件名称	说明	回调参数
confirm	点击确定按钮时触发	--
cancel	点击取消按钮时触发	--

20. MessageDialog

消息弹窗

例：

<cre-message-dialog
  :visible.sync="messageDialogVisible"
  title="我是提示标题"
  message="我是提示信息"
/>

按需引入样式依赖：

@import 'cre-ui/lib/theme-chalk/dialog.css'

MessageDialog Attributes

参数	说明	类型	可选值	默认值
visible	是否显示	Boolean	True / false	false
title	标题	String	--	提示
message	信息内容	String	--	--
confirmButtonText	确定按钮文字	String	--	确定
cancelButtonText	取消按钮文字	String	--	取消

MessageDialog Events

事件名称	说明	回调参数
confirm	点击确定按钮时触发	--
cancel	点击取消按钮时触发	--

21. Message

顶部弹出提示

引入：

import Vue from 'vue'
import { Message } from 'cre-ui'

Vue.prototype.$message = Message

使用：

// 钩子函数中
this.$message.info('提示信息')
this.$message.warning('警告信息')
this.$message.success('成功信息')
this.$message.error('错误信息')

22. Breadcrump

面包屑

例：

<cre-breadcrump
  :list="[
    { name: '首页', path: '/index' },
    { name: '个人订单', path: '/my-orders' },
    { name: '确认收货', path: '/receive' }
  ]"
/>

Breadcrump Attribute

参数	说明	类型	可选值	默认值
list	面包屑列表	Array (元素为{ name, path })	--	[]

附录 项目维护相关

Project setup

npm install

cd .\packages\theme-chalk

npm install

cd ..\..\

Compiles and hot-reloads for development

npm run serve

打包

整体打包

npm run dist

清理旧版本打包文件

npm run clean

生成 src/index.js 文件

npm run build:file

打包样式文件

npm run build:theme

Lints and fixes files

npm run lint