# cy-comp

> ## 介绍 👀

Latest version **1.1.1** (published 2025-11-28) · 0 weekly downloads

## Install

```sh
npm install cy-comp
pnpm add cy-comp
yarn add cy-comp
bun add cy-comp
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2025-11-28 |
| First published | 2023-03-17 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 534.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | snail_cy |
| Keywords | Vue3, element-plus, Anchor, proForm, SelectMonths, proTable, EditTable |

## Links

- npm: https://www.npmjs.com/package/cy-comp
- Repository: git@gitee.com:RockCy/cy-comp
- Homepage: https://gitee.com/RockCy/cy-comp
- npm.io page: https://npm.io/package/cy-comp

## Dependencies (6)

- [vue](https://npm.io/package/vue.md) ^3.2.45
- [sass](https://npm.io/package/sass.md) ^1.59.3
- [vuex](https://npm.io/package/vuex.md) ^4.1.0
- [vue-router](https://npm.io/package/vue-router.md) ^4.1.6
- [element-plus](https://npm.io/package/element-plus.md) ^2.3.0
- [@element-plus/icons](https://npm.io/package/@element-plus/icons.md) ^0.0.11

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2025-11-28
- 1.1.0 — 2025-11-27
- 1.0.99 — 2025-11-27
- 0.0.91 — 2025-11-27
- 1.0.98 — 2025-01-15
- 1.0.96 — 2023-09-28
- 1.0.95 — 2023-09-07
- 1.0.94 — 2023-08-25
- 1.0.93 — 2023-08-10
- 1.0.92 — 2023-08-10
- 1.0.91 — 2023-08-10
- 1.0.90 — 2023-08-09
- 1.0.89 — 2023-08-09
- 1.0.88 — 2023-08-09
- 1.0.87 — 2023-07-12
- … 29 more at https://npm.io/package/cy-comp/versions

## README

# Cy-Comp

## 介绍 👀

Cy-Comp 是一款基于 Element-Plus 二次开发的组件库。

## 安装使用 📔

```text
npm install cy-comp --S
或 yarn add cy-comp --S
```

- 全局引用

```js
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');
```

- 单个引用

```js
// Vue-js
import {CySelect} from 'cy-comp'
import   'cy-comp/dist/style.css'
// Vue-html
<CySelect :data="[{value:1,label:'测试'}]"></CySelect>

```

- Install:

```text
npm install 或 yarn add
```

- Run:

```text
npm run dev
```

- Build:

```text
npm run build
```

## 项目文档 📚

### CyAnchorGroup 组合式锚点

🌼 版本需大于等于 1.0.85

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

![image](./src/assets/imageRm/anchor.png)

- 使用方法

```html
<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      |    否    | 儿子锚点         |

例：

```js
 <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

- 使用方法

```html
<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 原有属性和方法。

- 使用方法

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

- CySelect - 属性

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

---

### CySelectMonths 月份多选框

🌼 版本需大于等于 1.0.83

![image](./src/assets/imageRm/selectMonths.png)

- 使用方法

```html
<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

![image](./src/assets/imageRm/selectQuarter.png)

- 使用方法

```html
<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 原有属性和方法。

- 使用方法

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

- CyRadioGroup - 属性

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

---

### CyCheckboxGroup

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

- 使用方法

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

- CyCheckboxGroup - 属性

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

---

### CyProForm 超级表单

- ProForm 属性

```js
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 搜索栏

![image](./src/assets/imageRm/searchform.png)

```html
<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 组件支持的所有事件 |

```js
columns = [
  {
    prop: 'name', // 搜索框 key
    label: '信息名称', // 搜索框提示词
    typeName: 'el-input', // 支持所有 el-form 组件
    attrs: {
      // el-form 组件所支持的所有属性
    },
    events: {
      // el-form 组件所支持的所有事件
    },
  },
];
```

```js
searchParam = {
  key: value,
};
```

- CySearchForm - 事件

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

---

### CyProTable

对 searchForm/el-table/el-page/dialog 的整合，合理规划了样式和布局

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


```js
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 再度封装，实现功能如下：

- 新增、删除、编辑、保存
- 定义可编辑列
- 表单校验规则

```js
import { CyEditTable, CyEditTableColumn } from 'cy-comp';
```

```html
<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

![image](./src/assets/imageRm/split.png)

- 使用方法

```html
<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>
```

```js
let split = 0.3;
```

- CySplit -  属性

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

---
_Source: https://npm.io/package/cy-comp · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._