color-view

ColorView

ColorView是一个基础组件库，组件自定义了基础功能，样式由class指定或通过外部配置定义，可以完全自定义样式。

组件

按钮`cv-button`

内容

content：按钮名称，默认确认。

 <cv-button>[content]</cv-button>

外观

type: btn、link
color: default、primary、success、warn、error
size: large、medium、small、mini
other: distant、distant-x、distant-y

 <cv-button c="[type] [color] [size] [other]"></cv-button>

绑定

icon：按钮图标
href：按钮链接

 <cv-button icon="search" href="index.html"></cv-button>

事件

click：单击

 <cv-button @click="click"></cv-button>

输入框`cv-input`

外观

type: input
color: default、primary、success、warn、error
size: large、medium、small、mini
other: distant、distant-x、distant-y

 <cv-input c="[type] [color] [size] [other]"></cv-input>

绑定

v-model：输入值

 <cv-input v-model="value"></cv-input>

事件

click：单击。
change: 值改变。
input: 输入。
focus: 获取焦点。
focusin: 获取焦点。
focusout: 失去焦点。

 <cv-input @click="click"></cv-input>
<cv-input @change="change"></cv-input>
<cv-input @input="input"></cv-input>
<cv-input @input="focus"></cv-input>
<cv-input @input="focusin"></cv-input>
<cv-input @input="focusout"></cv-input>

复选框`cv-check`

外观

type: check
color: default、primary、success、warn、error
size: large、medium、small、mini
other: distant、distant-x、distant-y

 <cv-check c="[type] [color] [size] [other]"></cv-check>

绑定

v-model：tristate为false 时，该值为Boolean类型，是否选中，tristate为true时，该值为Number类型，-1、0、1分别代表全选、部分选中、未选。
tristate：Boolean，是否支持三态。

 <cv-check v-model="checked" tristate></cv-check>

事件

change: 值改变。

 <cv-check @change="change"></cv-check>

单选框`cv-radio`

外观

type: radio
color: default、primary、success、warn、error
size: large、medium、small、mini
other: distant、distant-x、distant-y

 <cv-radio c="[type] [color] [size] [other]"></cv-radio>

绑定

v-model：Boolean，是否选中。
name: String，互斥单选框使用同一个name

 <cv-radio v-model="checked" name="demo"></cv-radio>

事件

change: 值改变。

 <cv-radio @change="change"></cv-radio>

开关`cv-switch`

外观

type: switch
color: default、primary、success、warn、error
size: large、medium、small、mini
other: distant、distant-x、distant-y

 <cv-switch c="[type] [color] [size] [other]"></cv-switch>

绑定

v-model：Boolean类型，是否开启。

 <cv-switch v-model="checked"></cv-switch>

事件

change: 值改变。

 <cv-switch @change="change"></cv-switch>

选择框`cv-select`

外观

type: select
color: default、primary、success、warn、error
size: large、medium、small、mini
other: distant、distant-x、distant-y

 <cv-select c="[type] [color] [size] [other]"></cv-select>

绑定

v-model：选中值。
options: Object/Array，选项。Object时key是option的value，value是option的text，Array时，id为option的value，name为option的text。
searchable：Boolean，是否支持搜索。
loading：Boolean，是否为加载中状态。
textKey：指定option的text使用哪个属性。
valueKey：指定option的value使用哪个属性，传入string或有toValue()的object。

 <cv-select v-model="value" :options="options" searchable loading textKey="name" valueKey="id"></cv-select>

事件

search: 搜索，仅searchable为true时有效，结束输入500ms后触发。

 <cv-select @search="search"></cv-select>

选择框`cv-datepicker`

外观

type: datepicker
color: default、primary、success、warn、error
size: large、medium、small、mini
other: distant、distant-x、distant-y

 <cv-datepicker c="[type] [color] [size] [other]"></cv-datepicker>

绑定

v-model：选中值。
lunar：Boolean，是否为农历。

 <cv-datepicker v-model="value" lunar></cv-datepicker>

标签`cv-tag`

内容

content：标签内容

 <cv-tag>[content]</cv-tag>

外观

type: tag
color: default、primary、success、warn、error
size: large、medium、small、mini
other: distant、distant-x、distant-y

 <cv-tag c="[type] [color] [size] [other]"></cv-tag>

表单`cv-form`

内容

content：表单容纳的内容，例如cv-input、cv-select等。

 <cv-form>[content]</cv-form>

外观

type: form
color: default
size: medium
other: distant、distant-x、distant-y

 <cv-select c="[type] [color] [size] [other]"></cv-select>

绑定

label: 表单名称。
labelWidth：表单名称宽度，用户表单对齐。传入数字是，单位是em，传入字符串时，直接使用，默认auto。

 <cv-form label="label" labelWidth="labelWidth"></cv-form>

表格`cv-table cv-table-column`

内容

content：单元格内容

scope是cv-table固定内容，scope包含有当前行的序号index（从1开始）和数据对象row。

 <cv-table>
    <template v-slot="scope">
        <cv-table-column :scope="scope">[content]</cv-table-column>
    </template>
</cv-table>

外观

type: table
color: default、primary
size: medium

 <cv-table c="[type] [color] [size]"></cv-table>

绑定

data: Array，表格数据。
headFixed: Boolean，表头是否固定。
label: 表头名称。
align: 单元格数据对齐方式，left、center、right，默认centen。
width: 单元格宽度。传入数字时，单位是px，传入字符串时，直接使用，默认auto。
title: 单元格hover时显示的内容。
fixed: Boolean，列是否固定。

 <cv-table :data="data" :headFixed="headFixed">
    <template v-solt="scope">
        <cv-table-column :scope="scope"
                :label="label"
                :align="align"
                :width="width" 
                :title="title" 
                :fixed="fixed">
        </cv-table-column>
    </template>
</cv-table>

分页`cv-pagination`

外观

type: pagination
color: primary
size: medium

 <cv-pagination c="[type] [color] [size]"></cv-pagination>

绑定

page: Object，分页对象，包含size、total、number三个属性，页码从1开始。

 <cv-pagination :page="page"></cv-pagination>

树`cv-tree`

内容

content：树节点内容，默认为label属性的内容。

 <cv-tree>[content]</cv-tree>

外观

type: tree
color: default
size: medium

 <cv-tree c="[type] [color] [size]"></cv-tree>

绑定

v-model: Array，选中的节点。
data: Array，树状数据。
active：Boolean或Number，指定是否展开及展开层数，默认0，即不展开。
checkable：Boolean或String，是否可选择，也可指定为all、leaf或none。
textKey：指定节点的text使用哪个属性。
valueKey：指定节点的value使用哪个属性，传入string或有toValue()的object。

 <cv-tree :data="data" active checkable textKey="label" valueKey="id"></cv-tree>

日历`cv-calendar`

外观

type: calendar
color: default
size: medium

 <cv-calendar c="[type] [color] [size]"></cv-calendar>

绑定

v-model: Date，日期
value: Date，日期

 <cv-calendar v-model="value" :value="value"></cv-calendar>

绑定

change: 选择日期时。

 <cv-calendar @change="change"></cv-calendar>

步骤条`cv-steps` `cv-step`

内容

content：步骤描述，默认使用description字段。

 <cv-steps>
    <cv-step>
        [content]
    </cv-step>
</cv-steps>

外观

type: steps
childType: step
color: default
size: medium

 <cv-steps c="[type] [color] [size]">
    <cv-step c="[type]"></cv-step>
</cv-steps>

绑定

active：Number，指定当前步骤，从1开始。
name: String，步骤名称。
description: String，步骤描述。

 <cv-steps :active="1">
    <cv-step name="name" description="description"></cv-step>
</cv-steps>

时间线`cv-timeline`

外观

type: timeline
color: default、primary、success、warn、error
size: medium

 <cv-timeline c="[type] [color] [size]"></cv-timeline>

绑定

data：Array，数据
titleKey: String，标题字段名。
timeKey: String，时间字段名。
- timeFormat: String，时间格式。

 <cv-timeline :data="data" titleKey="name" timeKey="time" timeFormat="YYYY-MM-DD"></cv-timeline>

模态框`cv-modal`

内容

content: 模态框内容。
footerContent：模态框脚部内容，默认是两个按钮。

 <cv-modal>
    [content]
    <template :slot="footer">
        [footerContent]
    </template>
</cv-modal>

外观

type: modal
color: default
size: large、medium、small、mini

 <cv-modal c="[type] [color] [size]"></cv-modal>

绑定

title：模态框名称，显示在模态框头部，默认提示。
hasHeader：Boolean，是否有头部，默认true。
hasFooter：Boolean，是否有脚部，默认true。
noncancelable: Boolean, 是否不可取消（不显示取消按钮），默认false。
cancelBtn：取消按钮名称，默认取消。
checkBtn：确认按钮名称，默认确认。
visible：Boolean，是否显示模态框，需要加.sync，否则从内部关闭后无法再打开。

 <cv-modal 
        title="title"
        hasHeader="hasHeader"
        hasFooter="hasFooter"
        cancelBtn="cancelBtn"
        checkBtn="checkBtn" 
        visible.sync="visible">
</cv-modal>

事件

show: 模态框显示。
hide: 模态框隐藏。
close: 使用右上角关闭按钮或点击遮罩关闭模态框。
cancel: 点击取消按钮。
check: 点击确认按钮。

 <cv-modal @show="show"></cv-modal>
<cv-modal @hide="hide"></cv-modal>
<cv-modal @check="check"></cv-modal>
<cv-modal @cancel="cancel"></cv-modal>
<cv-modal @close="close"></cv-modal>

消息框`cv-message-box`

内容

content: 消息框内容。

 <cv-message-box>
    [content]
</cv-message-box>

外观

type: message-box
color: default
size: large、medium、small、mini

 <cv-message-box c="[type] [color] [size]"></cv-message-box>

绑定

title: 消息框名称，显示在消息框头部，默认无头部。
type: 弹窗类型，可取值alert或confirm。
level: 消息等级，可取值info、success、warn、error，默认info。
msg: 消息内容。

 <cv-message-box title="title" type="alert" level="info" msg="msg"></cv-message-box>

事件

close: 任何方式使消息框关闭。

 <cv-message-box @close="close"></cv-message-box>

接口

接口绑定在Vue对象上，可以在Vue对象中使用this.xxx()调用。接口返回一个对象如下：

 {
    component: Vue对象,
    result: Promise对象，在关闭后返回结果
}

$alert(msg|props): 弹出消息，默认info等级。
$alertSuccess(msg): 弹出success等级的消息。
$alertWarn(msg): 弹出warn等级的消息。
$alertError(msg): 弹出error等级的消息。
$confirm(msg|props): 弹出确认框，默认info等级。
$confirmSuccess(msg): 弹出success等级的确认框。
$confirmWarn(msg): 弹出warn等级的确认框。
$confirmError(msg): 弹出error等级的确认框。

提示框`cv-toast`

内容

content: 消息框内容。

 <cv-toast>
    [content]
</cv-toast>

外观

type: toast
color: default
size: large、medium、small、mini

 <cv-toast c="[type] [color] [size]"></cv-toast>

绑定

level: 消息等级，可取值info、success、warn、error，默认info。
msg: 消息内容。

 <cv-toast level="info" msg="msg"></cv-toast>

事件

close: 任何方式使消息框关闭。

 <cv-toast @close="close"></cv-toast>

接口

接口绑定在Vue对象上，可以在Vue对象中使用this.xxx()调用。接口返回一个对象如下：

 {
    component: Vue对象,
    result: Promise对象，在关闭后返回结果
}

$toast(msg|props): 弹出提示，默认info等级。
$toastSuccess(msg): 弹出success等级的提示。
$toastWarn(msg): 弹出warn等级的提示。
$toastError(msg): 弹出error等级的提示。

滚动加载`v-scroll-load`

绑定

v-scroll-load：加载函数。
scroll-load-disabled: 是否禁用加载，默认false。
scroll-load-delay: 延迟加载时间，单位ms，默认200。
scroll-load-distance: 加载触发距离，单位px，默认0。
scroll-load-immediate: 是否立即加载，默认false。

 <div v-scroll-load="load" 
     scroll-load-disabled
     scroll-load-delay="200"
     scroll-load-distance="0" 
     scroll-load-immediate>
</div>

下次触发加载不会在上次加载时触发，加载函数可以返回Promise对象。

版本记录

v1.2.0（2022-02-xx）

增加Steps组件。
增加Timeline组件。
增加Toast组件。
修改Alert组件为MessageBox。
修改Input组件，增加type=textarea。
优化Select组件，增加placeholder支持，增加search事件。
增加ScrollLoad滚动加载指令。

v1.1.0（2022-01-25）

增加Alert组件。
Tree组件支持slot插槽。
优化Select组件。

v1.0.0（2021-12-04）

增加Btn、Input等12个基础组件。

Dependencies

core-js: ^3.6.5 dayjs: ^1.10.7 vue: ^2.6.11

Dependencies

@vue/cli-plugin-babel: ~4.5.0 @vue/cli-plugin-eslint: ~4.5.0 @vue/cli-service: ~4.5.0 babel-eslint: ^10.1.0 eslint: ^6.7.2 eslint-plugin-vue: ^6.2.2 sass: ^1.26.5 sass-loader: ^8.0.2 vue-template-compiler: ^2.6.11

color-view

ColorView

组件

按钮cv-button

内容

外观

绑定

事件

输入框cv-input

外观

绑定

事件

复选框cv-check

外观

绑定

事件

单选框cv-radio

外观

绑定

事件

开关cv-switch

外观

绑定

事件

选择框cv-select

外观

绑定

事件

选择框cv-datepicker

外观

绑定

标签cv-tag

内容

外观

表单cv-form

内容

外观

绑定

表格cv-table cv-table-column

内容

外观

绑定

分页cv-pagination

外观

绑定

树cv-tree

内容

外观

绑定

日历cv-calendar

外观

绑定

绑定

步骤条cv-steps cv-step

内容

外观

绑定

时间线cv-timeline

外观

绑定

模态框cv-modal

内容

外观

绑定

事件

消息框cv-message-box

内容

外观

绑定

事件

接口

提示框cv-toast

内容

外观

绑定

事件

接口

滚动加载v-scroll-load

绑定

版本记录

按钮`cv-button`

输入框`cv-input`

复选框`cv-check`

单选框`cv-radio`

开关`cv-switch`

选择框`cv-select`

选择框`cv-datepicker`

标签`cv-tag`

表单`cv-form`

表格`cv-table cv-table-column`

分页`cv-pagination`

树`cv-tree`

日历`cv-calendar`

步骤条`cv-steps` `cv-step`

时间线`cv-timeline`

模态框`cv-modal`

消息框`cv-message-box`

提示框`cv-toast`

滚动加载`v-scroll-load`