Cy-Comp 是一款基于 Element-Plus 二次开发的组件库。
npm install cy-comp --S
或 yarn add cy-comp --S
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import CyComp from 'cy-comp';
import 'cy-comp/dist/style.css';
const app = createApp(App);
app.use(ElementPlus).use(CyComp).mount('#app');
// Vue-js
import {CySelect} from 'cy-comp'
import 'cy-comp/dist/style.css'
// Vue-html
<CySelect :data="[{value:1,label:'测试'}]"></CySelect>
npm install 或 yarn add
npm run dev
npm run build
🌼 版本需大于等于 1.0.85
- 描述:组件包括了锚点列表和对应内容,更好的实现了双向联动效果。若不希望高耦合可使用 CyAnchorMenu 组件。
<CyAnchorGroup v-model="val" :data="titleList" menuDirection="right" height="500"> </CyAnchorGroup>
属性名 |
类型 |
是否必填 |
描述 |
v-model / modelValue |
String |
否 |
当前激活节点 |
data[itemAnchor] |
Array |
是 |
锚点配置项 |
menuDirection |
String:right / left / top |
否 |
锚点菜单方向。默认 right |
height |
String / Number |
否 |
主题高度。默认 500 |
-CyAnchorGroup - itemAnchor 属性
属性名 |
类型 |
是否必填 |
描述 |
name |
String |
是 |
锚点名称 |
key |
String / Number |
是 |
锚点唯一标识 |
component |
component |
是 |
锚点内容组件 |
attrs |
Object |
否 |
传递给组件的属性 |
children[itemAnchor] |
Array |
否 |
儿子锚点 |
例:
<CyAnchorGroup v-model="val" :data='list' menuDirection="right" height="500" > </CyAnchorGroup>
import Comp from './comp.vue'
import {ref} from 'vue'
let val=ref('envPerson')
const list = [
{
name: '环保管理运维人员',
key: 'envPerson',
component: Comp,
attrs: {
content: '#F4EAD5'
},
children: [
{
name: '组件1',
key: 'zujian1',
component: Comp,
attrs: {
content: '#F4EAD1'
}
}
]
}
]
🌼 版本需大于等于 1.0.85
<CyAnchorMenu v-model="val" :data="list"></CyAnchorMenu>
属性名 |
类型 |
是否必填 |
描述 |
v-model / modelValue |
String |
否 |
当前激活节点 |
data[itemAnchor] |
Array |
是 |
锚点配置项(同 AnchorGroup) |
anchorHref |
Boolern |
否 |
是否为 href 模式,默认为 false |
menuDirection |
String:column / row |
否 |
锚点布局方式:横向 / 纵向 。默认为 row |
描述:对 el-select 和 el-option 的封装。支持所有 el-select 原有属性和方法。
<cy-select :data='[{value:1,label:"测试"}]'></cy-select>
属性名 |
类型 |
描述 |
data |
Array |
必填,通过 data 值渲染下拉框 |
🌼 版本需大于等于 1.0.83
<cy-select-months v-model="value"></cy-select-months>
属性名 |
类型 |
描述 |
v-model |
Array |
- |
collapseTagsClose |
Boolean |
tag 是否可关闭,默认为 true |
collapseTags |
Boolean |
多选时是否将选中值按文字的形式展示 |
maxCollapseTags |
String,Number |
需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。 |
placeholder |
String |
placeholder |
🌼 版本需大于等于 1.0.94
<cy-select-quarter v-module="value" placeholder="请选择"></cy-select-quarter>
属性名 |
类型 |
描述 |
v-model |
String |
|
placeholder |
String |
|
适用于在多个互斥的选项中选择的场景。
对 el-radio-group 和 el-radio 的封装。支持所有 el-radio-group 原有属性和方法。
<cy-radio-group :data='[{value:1,label:"测试"}]'></cy-radio-group>
属性名 |
类型 |
描述 |
data |
Array |
必填,通过 data 值渲染单选组合 |
多选框组:适用于多个勾选框绑定到同一个数组的情景,通过是否勾选来表示这一组选项中选中的项。
对 el-checkbox-group 和 el-checkbox 的封装。支持所有 el-checkbox-group 原有属性和方法。
<cy-checkbox-group :data='[{value:1,label:"测试"}]'></cy-checkbox-group>
属性名 |
类型 |
描述 |
data |
Array |
必填,通过 data 值渲染复选框组合 |
type:String,// ['show'/'edit'/'add'] default='add' form 类型
options:{
form: { // el-form属性
inline: Boolean,// default=false, 是否行内展示
labelPosition:String,// 'right',
labelWidth: '80px',
size: 'large',
disabled: false,
labelSuffix: ' :',
},
columns: [
{
formItem: {
prop: 'username',// 必填,formItem中Value 的key
customComponent:Boolean,// 是否使用自定义组件。default=false 。 若为true,atte.typeName=自定义组件
... // 以下为el-form-item 组件支持的所有属性
label: '用户名',
labelWidth: '180px',
required: true,
},
attrs: {
typeName: 'el-input',//(必填) [String/Component] [ el组件名/内置组件名/自定义组件]。注意自定义组件需支持v-model
.... // 以下属性为组件需要的所有属性
},
event:{ // 需要绑定的事件
// 例如:el-input change事件
change:(e)=>{
console.log('点击了组件')
}
}
},
],
}
方法名 |
描述 |
示例 |
validateForm() |
校验 Form 表单,返回一个 promise:如果校验成功,返回 formValue.如果校验失败组件给出一个弹出框提示‘缺少必填项’ |
Ref.validateForm().then((data)=>{ ...}) |
getValue() |
返回 formValue 值 |
console.log(Ref.getValue()); |
setValue() |
设置 formValue 值 |
Ref.setValue({key: value}); |
clear() |
清空 formValue 值 |
Ref.clear(); |
事件名 |
描述 |
示例 |
valueChange |
formValue 值改变时出发 |
|
<CySearchForm :columns="columns" :searchParam="searchParam"></CySearchForm>
名称 |
类型 |
描述 |
columns |
Array |
必填,搜索选项数据,具体参数见下方描述 |
searchParam |
Object |
搜索值 |
labelWidth |
Number 或 String |
组件整的 label 宽的 默认为 100px |
resetbtn |
Boolern |
是否显示重置按钮,默认为 true |
名称 |
类型 |
描述 |
prop |
string |
必填,搜索框 key |
label |
string |
必填,搜索框提示词 |
typeName |
string |
必填,组件名称。支持所有 el-form 组件 |
attrs |
object |
el-form 组件支持的所有属性 |
events |
object |
el-form 组件支持的所有事件 |
columns = [
{
prop: 'name', // 搜索框 key
label: '信息名称', // 搜索框提示词
typeName: 'el-input', // 支持所有 el-form 组件
attrs: {
// el-form 组件所支持的所有属性
},
events: {
// el-form 组件所支持的所有事件
},
},
];
searchParam = {
key: value,
};
事件名称 |
描述 |
示例 |
search |
点击搜索按钮触发 |
|
reset |
点击重置按钮触发 |
|
对 searchForm/el-table/el-page/dialog 的整合,合理规划了样式和布局
<CyProTable :attr="{tableSearchbar:true,tablePage:true,showDetail:false,}">
<template #search>
<div>搜索栏</div>
</template>
<template #table="{height}">
<el-table :height="height" border>
<el-table-column type="index" label="序号" width="60"></el-table-column>
<el-table-column type="name" label="姓名"></el-table-column>
</el-table>
</template>
</CyProTable>
属性 |
类型 |
描述 |
page |
Object |
如果分页必填 |
small |
Boolean |
默认为false 是否使用 small 结构 |
attr |
Object |
其他属性 详见:CyProTable-attr属性 |
属性 |
类型 |
描述 |
tableSearchbar |
Boolean |
tabele 是否展示【搜索】栏 |
tablePage |
Boolean |
tabele 是否展示【分页】 |
showDetail |
Boolean |
否展示【详情】按钮 |
dialogPage |
Boolean |
dialog 是否展示【分页】 |
page: {// 分页
size:Number,// 每页显示条数
total:Number , // 总数
page:Number , // 但钱页数
},
small: Boolean,// 是否使用 small 结构
attr:{ //
showDetail:Boolean ,// 是否展示【详情】按钮
tableSearchbar :Boolean ,// tabele 是否展示【搜索】栏
tablePage:Boolean ,// tabele 是否展示【分页】
dialogTitle:String,// dialog 的标题,
dialogSearchBar: Boolean ,// dialog 是否展示【搜索】栏
dialogPage:Boolean ,// dialog 是否展示【分页】
dialogPage:Boolean ,// dialog 是否展示【分页】
}
名称 |
参数 |
描述 |
search |
- |
搜索栏 |
table |
height |
主题部分,返回计算出的 table 最适合的高度 |
🌼 版本需大于等于 1.0.87
对 elTable 再度封装,实现功能如下:
- 新增、删除、编辑、保存
- 定义可编辑列
- 表单校验规则
import { CyEditTable, CyEditTableColumn } from 'cy-comp';
<CyEditTable class="edit-table" :data="tableData">
<CyEditTableColumn prop="date" label="时间"> </CyEditTableColumn>
<CyEditTableColumn prop="name" label="姓名"> </CyEditTableColumn>
<CyEditTableColumn prop="address" label="地址"> </CyEditTableColumn>
</CyEditTable>
支持 el-table 所有属性。
名称 |
类型 |
描述 |
data |
Array |
必填,显示的数据 |
request |
function |
动态数据,如果同时配置了 data 和 request,则最终渲染为两个数据的和 |
方法名 |
参数 |
描述 |
editActions.addRow |
row |
增加一行可编辑态的行 |
editActions.deleteRow |
$index |
删除指定行,不论该行是编辑态还是非编辑态都会被删除 |
editActions.startEditable |
$index |
指定行变为编辑态 |
editActions.saveEditable |
$index |
保存编辑态并触发表单校验,如果校验通过,编辑数据会被更新到表格中。 |
editActions.cancelEditable |
$index |
指定行取消编辑态 |
🌼 版本需大于等于 1.0.94
<cy-split v-model="split">
<template #left>
<div class="demo-split-pane">Left Pane</div>
</template>
<template #right>
<div class="demo-split-pane">Right Pane</div>
</template>
</cy-split>
名称 |
类型 |
描述 |
v-model |
number |
0-1 之间的数组,表示左右面板占比 |
mode |
string |
horizontal:横向分割(默认) vertical:竖向分割 |