1 Star 0 Fork 0

Coufran / color-view

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Please pay attention to the specific project description and its upstream code dependency when using it.
Clone or Download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

ColorView

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

组件

按钮cv-button

内容

  • content:按钮名称,默认确认
<cv-button>[content]</cv-button>

外观

  • type: btnlink
  • color: defaultprimarysuccesswarnerror
  • size: largemediumsmallmini
  • other: distantdistant-xdistant-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: defaultprimarysuccesswarnerror
  • size: largemediumsmallmini
  • other: distantdistant-xdistant-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: defaultprimarysuccesswarnerror
  • size: largemediumsmallmini
  • other: distantdistant-xdistant-y
<cv-check c="[type] [color] [size] [other]"></cv-check>

绑定

  • v-modeltristatefalse 时,该值为Boolean类型,是否选中,tristatetrue时,该值为Number类型,-101分别代表全选、部分选中、未选。
  • tristate:Boolean,是否支持三态。
<cv-check v-model="checked" tristate></cv-check>

事件

  • change: 值改变。
<cv-check @change="change"></cv-check>

单选框cv-radio

外观

  • type: radio
  • color: defaultprimarysuccesswarnerror
  • size: largemediumsmallmini
  • other: distantdistant-xdistant-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: defaultprimarysuccesswarnerror
  • size: largemediumsmallmini
  • other: distantdistant-xdistant-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: defaultprimarysuccesswarnerror
  • size: largemediumsmallmini
  • other: distantdistant-xdistant-y
<cv-select c="[type] [color] [size] [other]"></cv-select>

绑定

  • v-model:选中值。
  • options: Object/Array,选项。Object时key是option的value,value是option的text,Array时,idoption的value,nameoption的text。
  • searchable:Boolean,是否支持搜索。
  • loading:Boolean,是否为加载中状态。
  • textKey:指定option的text使用哪个属性。
  • valueKey:指定option的value使用哪个属性。
<cv-select v-model="value" :options="options" searchable loading textKey="name" valueKey="id"></cv-select>

事件

  • input: 输入内容,仅searchabletrue是有效。
<cv-select @change="change"></cv-select>

标签cv-tag

内容

  • content:标签内容
<cv-tag>[content]</cv-tag>

外观

  • type: tag
  • color: defaultprimarysuccesswarnerror
  • size: largemediumsmallmini
  • other: distantdistant-xdistant-y
<cv-tag c="[type] [color] [size] [other]"></cv-tag>

表单cv-form

内容

  • content:表单容纳的内容,例如cv-inputcv-select等。
<cv-form>[content]</cv-form>

外观

  • type: form
  • color: default
  • size: medium
  • other: distantdistant-xdistant-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:单元格内容

scopecv-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: defaultprimary
  • size: medium
<cv-table c="[type] [color] [size]"></cv-table>

绑定

  • data: Array,表格数据。
  • headFixed: Boolean,表头是否固定。
  • label: 表头名称。
  • align: 单元格数据对齐方式,leftcenterright,默认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

外观

  • type: tree
  • color: default
  • size: medium
<cv-tree c="[type] [color] [size]"></cv-tree>

绑定

  • v-model: Array,选中的节点。
  • data: Array,树状数据。
  • active:Boolean,是否展开。
  • checked:Number,-101分别代表全选、部分选、未选。
  • checkable:Boolean,是否可选择。
  • textKey:指定节点的text使用哪个属性。
  • valueKey:指定节点的value使用哪个属性。
<cv-tree :data="data" active :checked.sync="1" checkable textKey="label" valueKey="id"></cv-tree>

模态框cv-modal

内容

  • content: 模态框内容。
  • footerContent:模态框脚部内容,默认是两个按钮。
<cv-modal>
    [content]
    <template :slot="footer">
        [footerContent]
    </template>
</cv-modal>

外观

  • type: modal
  • color: default
  • size: largemediumsmallmini
<cv-modal class="[type] [color] [size]"></cv-modal>

绑定

  • title:模态框名称,显示在模态框头部,默认提示
  • hasHeader:Boolean,是否有头部,默认true
  • hasFooter:Boolean,是否有脚部,默认true
  • 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-select @show="show"></cv-select>
<cv-select @hide="hide"></cv-select>
<cv-select @check="check"></cv-select>
<cv-select @cancel="cancel"></cv-select>
<cv-select @close="close"></cv-select>

Repository Comments ( 0 )

Sign in to post a comment

About

Vue组件库 expand collapse
Vue and 3 more languages
Cancel

Releases (3)

All

Contributors

All

Activities

Load More
can not load any more
1
https://gitee.com/coufran/color-view.git
git@gitee.com:coufran/color-view.git
coufran
color-view
color-view
master

Search