Cy-Comp

介绍 👀

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>

• Install:

npm install 或 yarn add

• Run:

npm run dev

• Build:

npm run build

项目文档 📚

CyAnchorGroup 组合式锚点

🌼 版本需大于等于 1.0.85

• 描述：组件包括了锚点列表和对应内容，更好的实现了双向联动效果。若不希望高耦合可使用 CyAnchorMenu 组件。

• 使用方法

<CyAnchorGroup v-model="val" :data="titleList" menuDirection="right" height="500"> </CyAnchorGroup>

• 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'
        }
      }
    ]
  }
]

CyAnchorMenu 锚点列表

🌼 版本需大于等于 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

CySelect 下拉选择框

描述：对 el-select 和 el-option 的封装。支持所有 el-select 原有属性和方法。

• 使用方法

<cy-select :data='[{value:1,label:"测试"}]'></cy-select>

• CySelect - 属性

属性名	类型	描述
data	Array	必填，通过 data 值渲染下拉框

---

CySelectMonths 月份多选框

🌼 版本需大于等于 1.0.83

• 使用方法

<cy-select-months v-model="value"></cy-select-months>

• CySelectMonths - 属性

属性名	类型	描述
v-model	Array	-
collapseTagsClose	Boolean	tag 是否可关闭，默认为 true
collapseTags	Boolean	多选时是否将选中值按文字的形式展示
maxCollapseTags	String,Number	需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。
placeholder	String	placeholder

---

CyselectQuarter 季度选择器

🌼 版本需大于等于 1.0.94

• 使用方法

<cy-select-quarter v-module="value" placeholder="请选择"></cy-select-quarter>

• cy-select-quarter 属性

属性名	类型	描述
v-model	String
placeholder	String

---

CyRadioGroup 单选框组

适用于在多个互斥的选项中选择的场景。 对 el-radio-group 和 el-radio 的封装。支持所有 el-radio-group 原有属性和方法。

• 使用方法

<cy-radio-group :data='[{value:1,label:"测试"}]'></cy-radio-group>

• CyRadioGroup - 属性

属性名	类型	描述
data	Array	必填，通过 data 值渲染单选组合

---

CyCheckboxGroup

多选框组：适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。 对 el-checkbox-group 和 el-checkbox 的封装。支持所有 el-checkbox-group 原有属性和方法。

• 使用方法

<cy-checkbox-group :data='[{value:1,label:"测试"}]'></cy-checkbox-group>

• CyCheckboxGroup - 属性

属性名	类型	描述
data	Array	必填，通过 data 值渲染复选框组合

---

CyProForm 超级表单

• ProForm 属性

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('点击了组件')
          }
      }
    },

  ],
}

• CyProForm 方法

方法名	描述	示例
validateForm()	校验 Form 表单，返回一个 promise：如果校验成功，返回 formValue.如果校验失败组件给出一个弹出框提示‘缺少必填项’	Ref.validateForm().then((data)=>{ ...})
getValue()	返回 formValue 值	console.log(Ref.getValue());
setValue()	设置 formValue 值	Ref.setValue({key: value});
clear()	清空 formValue 值	Ref.clear();

• CyProForm 事件

事件名	描述	示例
valueChange	formValue 值改变时出发

---

CySearchForm 搜索栏

<CySearchForm :columns="columns" :searchParam="searchParam"></CySearchForm>

• CySearchForm 属性

名称	类型	描述
columns	Array	必填，搜索选项数据，具体参数见下方描述
searchParam	Object	搜索值
labelWidth	Number 或 String	组件整的 label 宽的 默认为 100px
resetbtn	Boolern	是否显示重置按钮，默认为 true

• CySearchForm-columns 属性

名称	类型	描述
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,
};

• CySearchForm - 事件

事件名称	描述	示例
search	点击搜索按钮触发
reset	点击重置按钮触发

---

CyProTable

对 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>

• CyProTable 属性

属性	类型	描述
page	Object	如果分页必填
small	Boolean	默认为false 是否使用 small 结构
attr	Object	其他属性 详见：CyProTable-attr属性

• 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 是否展示【分页】
}

• CyProTable - 插槽

名称	参数	描述
search	-	搜索栏
table	height	主题部分,返回计算出的 table 最适合的高度

---

CyEditTable 可编辑表格

🌼 版本需大于等于 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>

• CyEditTable 属性

支持 el-table 所有属性。

名称	类型	描述
data	Array	必填，显示的数据
request	function	动态数据，如果同时配置了 data 和 request，则最终渲染为两个数据的和

• CyEditTable 方法

方法名	参数	描述
editActions.addRow	row	增加一行可编辑态的行
editActions.deleteRow	$index	删除指定行，不论该行是编辑态还是非编辑态都会被删除
editActions.startEditable	$index	指定行变为编辑态
editActions.saveEditable	$index	保存编辑态并触发表单校验，如果校验通过，编辑数据会被更新到表格中。
editActions.cancelEditable	$index	指定行取消编辑态

CySplit 面板分割

🌼 版本需大于等于 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>

let split = 0.3;

• CySplit - 属性

名称	类型	描述
v-model	number	0-1 之间的数组，表示左右面板占比
mode	string	horizontal：横向分割(默认) vertical：竖向分割