# color-view

**Repository Path**: coufran/color-view

## Basic Information

- **Project Name**: color-view
- **Description**: Vue组件库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-08
- **Last Updated**: 2024-03-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, 组件库, lib

## README

# ColorView
ColorView是一个基础组件库，组件自定义了基础功能，样式由class指定或通过外部配置定义，可以完全自定义样式。
# 组件
## 按钮``cv-button``
### 内容
- content：按钮名称，默认``确认``。
```html
<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``
```html
<cv-button c="[type] [color] [size] [other]"></cv-button>
```
### 绑定
- ``icon``：按钮图标
- ``href``：按钮链接
```html
<cv-button icon="search" href="index.html"></cv-button>
```
### 事件
- ``click``：单击
```html
<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``
```html
<cv-input c="[type] [color] [size] [other]"></cv-input>
```
### 绑定
- ``v-model``：输入值
```html
<cv-input v-model="value"></cv-input>
```
### 事件
- ``click``：单击。
- ``change``: 值改变。
- ``input``: 输入。
- ``focus``: 获取焦点。
- ``focusin``: 获取焦点。
- ``focusout``: 失去焦点。
```html
<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``
```html
<cv-check c="[type] [color] [size] [other]"></cv-check>
```
### 绑定
- ``v-model``：``tristate``为``false`` 时，该值为Boolean类型，是否选中，``tristate``为``true``时，该值为Number类型，``-1``、``0``、``1``分别代表全选、部分选中、未选。
- ``tristate``：Boolean，是否支持三态。
```html
<cv-check v-model="checked" tristate></cv-check>
```
### 事件
- ``change``: 值改变。
```html
<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``
```html
<cv-radio c="[type] [color] [size] [other]"></cv-radio>
```
### 绑定
- ``v-model``：Boolean，是否选中。
- ``name``: String，互斥单选框使用同一个name
```html
<cv-radio v-model="checked" name="demo"></cv-radio>
```
### 事件
- ``change``: 值改变。
```html
<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``
```html
<cv-switch c="[type] [color] [size] [other]"></cv-switch>
```
### 绑定
- ``v-model``：Boolean类型，是否开启。
```html
<cv-switch v-model="checked"></cv-switch>
```
### 事件
- ``change``: 值改变。
```html
<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``
```html
<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``。
```html
<cv-select v-model="value" :options="options" searchable loading textKey="name" valueKey="id"></cv-select>
```
### 事件
- ``search``: 搜索，仅``searchable``为``true``时有效，结束输入500ms后触发。
```html
<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``
```html
<cv-datepicker c="[type] [color] [size] [other]"></cv-datepicker>
```
### 绑定
- ``v-model``：选中值。
- ``lunar``：Boolean，是否为农历。
```html
<cv-datepicker v-model="value" lunar></cv-datepicker>
```

## 标签``cv-tag``
### 内容
- content：标签内容
```html
<cv-tag>[content]</cv-tag>
```
### 外观
- type: ``tag``
- color: ``default``、``primary``、``success``、``warn``、``error``
- size: ``large``、``medium``、``small``、``mini``
- other: ``distant``、``distant-x``、``distant-y``
```html
<cv-tag c="[type] [color] [size] [other]"></cv-tag>
```

## 表单``cv-form``
### 内容
- content：表单容纳的内容，例如``cv-input``、``cv-select``等。
```html
<cv-form>[content]</cv-form>
```
### 外观
- type: ``form``
- color: ``default``
- size: ``medium``
- other: ``distant``、``distant-x``、``distant-y``
```html
<cv-select c="[type] [color] [size] [other]"></cv-select>
```
### 绑定
- ``label``: 表单名称。
- ``labelWidth``：表单名称宽度，用户表单对齐。传入数字是，单位是``em``，传入字符串时，直接使用，默认``auto``。
```html
<cv-form label="label" labelWidth="labelWidth"></cv-form>
```

## 表格``cv-table cv-table-column``
### 内容
- content：单元格内容
> ``scope``是``cv-table``固定内容，``scope``包含有当前行的序号``index``（从1开始）和数据对象``row``。
```html
<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``
```html
<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，列是否固定。
```html
<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``
```html
<cv-pagination c="[type] [color] [size]"></cv-pagination>
```
### 绑定
- ``page``: Object，分页对象，包含size、total、number三个属性，页码从1开始。
```html
<cv-pagination :page="page"></cv-pagination>
```

## 树``cv-tree``
### 内容
- content：树节点内容，默认为``label``属性的内容。
```html
<cv-tree>[content]</cv-tree>
```
### 外观
- type: ``tree``
- color: ``default``
- size: ``medium``
```html
<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``。
```html
<cv-tree :data="data" active checkable textKey="label" valueKey="id"></cv-tree>
```

## 日历``cv-calendar``
### 外观
- type: ``calendar``
- color: ``default``
- size: ``medium``
```html
<cv-calendar c="[type] [color] [size]"></cv-calendar>
```
### 绑定
- ``v-model``: Date，日期
- ``value``: Date，日期
```html
<cv-calendar v-model="value" :value="value"></cv-calendar>
```
### 绑定
- ``change``: 选择日期时。
```html
<cv-calendar @change="change"></cv-calendar>
```

## 步骤条``cv-steps`` ``cv-step``
### 内容
- content：步骤描述，默认使用description字段。
```html
<cv-steps>
    <cv-step>
        [content]
    </cv-step>
</cv-steps>
```
### 外观
- type: ``steps``
- childType: ``step``
- color: ``default``
- size: ``medium``
```html
<cv-steps c="[type] [color] [size]">
    <cv-step c="[type]"></cv-step>
</cv-steps>
```
### 绑定
- ``active``：Number，指定当前步骤，从1开始。
- ``name``: String，步骤名称。
- ``description``: String，步骤描述。
```html
<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``
```html
<cv-timeline c="[type] [color] [size]"></cv-timeline>
```
### 绑定
- ``data``：Array，数据
- ``titleKey``: String，标题字段名。
- ``timeKey``: String，时间字段名。
- - ``timeFormat``: String，时间格式。
```html
<cv-timeline :data="data" titleKey="name" timeKey="time" timeFormat="YYYY-MM-DD"></cv-timeline>
```

## 模态框``cv-modal``
### 内容
- content: 模态框内容。
- footerContent：模态框脚部内容，默认是两个按钮。
```html
<cv-modal>
    [content]
    <template :slot="footer">
        [footerContent]
    </template>
</cv-modal>
```
### 外观
- type: ``modal``
- color: ``default``
- size: ``large``、``medium``、``small``、``mini``
```html
<cv-modal c="[type] [color] [size]"></cv-modal>
```
### 绑定
- ``title``：模态框名称，显示在模态框头部，默认``提示``。
- ``hasHeader``：Boolean，是否有头部，默认``true``。
- ``hasFooter``：Boolean，是否有脚部，默认``true``。
- ``noncancelable``: Boolean, 是否不可取消（不显示取消按钮），默认``false``。
- ``cancelBtn``：取消按钮名称，默认``取消``。
- ``checkBtn``：确认按钮名称，默认``确认``。
- ``visible``：Boolean，是否显示模态框，需要加``.sync``，否则从内部关闭后无法再打开。
```html
<cv-modal 
        title="title"
        hasHeader="hasHeader"
        hasFooter="hasFooter"
        cancelBtn="cancelBtn"
        checkBtn="checkBtn" 
        visible.sync="visible">
</cv-modal>
```
### 事件
- ``show``: 模态框显示。
- ``hide``: 模态框隐藏。
- ``close``: 使用右上角关闭按钮或点击遮罩关闭模态框。
- ``cancel``: 点击取消按钮。
- ``check``: 点击确认按钮。
```html
<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: 消息框内容。
```html
<cv-message-box>
    [content]
</cv-message-box>
```
### 外观
- type: ``message-box``
- color: ``default``
- size: ``large``、``medium``、``small``、``mini``
```html
<cv-message-box c="[type] [color] [size]"></cv-message-box>
```
### 绑定
- ``title``: 消息框名称，显示在消息框头部，默认无头部。
- ``type``: 弹窗类型，可取值``alert``或``confirm``。
- ``level``: 消息等级，可取值``info``、``success``、``warn``、``error``，默认``info``。
- ``msg``: 消息内容。
```html
<cv-message-box title="title" type="alert" level="info" msg="msg"></cv-message-box>
```
### 事件
- ``close``: 任何方式使消息框关闭。
```html
<cv-message-box @close="close"></cv-message-box>
```
### 接口
接口绑定在Vue对象上，可以在Vue对象中使用``this.xxx()``调用。接口返回一个对象如下：
```javascript
{
    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: 消息框内容。
```html
<cv-toast>
    [content]
</cv-toast>
```
### 外观
- type: ``toast``
- color: ``default``
- size: ``large``、``medium``、``small``、``mini``
```html
<cv-toast c="[type] [color] [size]"></cv-toast>
```
### 绑定
- ``level``: 消息等级，可取值``info``、``success``、``warn``、``error``，默认``info``。
- ``msg``: 消息内容。
```html
<cv-toast level="info" msg="msg"></cv-toast>
```
### 事件
- ``close``: 任何方式使消息框关闭。
```html
<cv-toast @close="close"></cv-toast>
```
### 接口
接口绑定在Vue对象上，可以在Vue对象中使用``this.xxx()``调用。接口返回一个对象如下：
```javascript
{
    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``。
```html
<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个基础组件。