color-view v1.2.3

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个基础组件。