1 Star 0 Fork 0

莹莹 / cy-comp

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

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 组件。

image

  • 使用方法
<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

image

  • 使用方法
<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

  • 使用方法
<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 搜索栏

image

<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

image

  • 使用方法
<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:竖向分割
MIT License Copyright (c) 2023 莹莹 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

vite+vue3 基于element-plus 二次开发的组件库 展开 收起
Vue 等 5 种语言
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/RockCy/cy-comp.git
git@gitee.com:RockCy/cy-comp.git
RockCy
cy-comp
cy-comp
master

搜索帮助