cre-ui v1.1.3

cre-ui 文档

版本：v-1.0.26

一、组件库介绍

组件库地址: 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

2. Pagination

分页组件

例：

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

Pagination Attributes

Pagination Event

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

4. Timer

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

例：

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

Timer Attributes

Timer Event

5. BackTop

回到顶部按钮

例：

<cre-back-top />

BackTop Attributes

6. Comment

评论组件

例：

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

Comment Attributes

Comment Slot

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

Collapse Slots

Collapse Events

8. TagList

标签列表

例：

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

TagList Attributes

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

9. Input

输入框

例：

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

Input Event

10. Textarea

文本域

例：

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

Textarea Attributes

Textarea Event

11. Select

选择框

例：

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

Select Attributes

Select Event

12. Checkbox

复选框

例：

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

Checkbox Attributes

Checkbox Event

13. CheckboxGroup

复选框组

例：

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

按需引入样式依赖：

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

CheckboxGroup Attributes

CheckboxGroup Event

14. RadioGroup

单选按钮组

例：

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

RadioGroup Attributes

RadioGroup Event

15. Datepicker

日期选择

例：

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

按需引入样式依赖：

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

Datepicker Attributes

Datepicker Event

16. Image

图片展示

例：

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

Image Attributes

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

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

ImageUpload Event

19. Dialog

弹窗组件

例：

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

Dialog Attributes

Dialog Slot

Dialog Events

20. MessageDialog

消息弹窗

例：

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

按需引入样式依赖：

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

MessageDialog Attributes

MessageDialog Events

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

附录 项目维护相关

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