# csw-element-ui **Repository Path**: chenswei/csw-element-ui ## Basic Information - **Project Name**: csw-element-ui - **Description**: 二次封装element-ui - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2022-01-05 - **Last Updated**: 2022-06-28 ## Categories & Tags **Categories**: Uncategorized **Tags**: Vue, Element-UI ## README # csw-element-ui #### 介绍 ``` 基于VUE2二次封装的Element-UI ``` #### 安装 ``` npm install csw-element-ui -D ``` #### 引入 ``` // main.js中全局引入 import cswElementUi from "csw-element-ui" // 引入Confirm弹框 Vue.prototype.$cswConfirm = cswElementUi.cswConfirm // 注册 Vue.use(cswElementUi); // 注册自定义指令 Vue.use(cswElementUi.directives) ``` #### 使用 ``` 组件内直接使用组件 ``` #### 组件序列 ``` 1.Upload图片上传 2.Paging分页 3.Confirm弹框 this.$cswConfirm() 4.Dialog弹框 5.Select选择器 6.TinyMCE富文本编辑器 7.Sort排序 ``` #### 指令序列 ``` 1.防抖 v-debounce 2.节流 v-throole 3.input自动获取焦点 v-focus 4.浮点数 v-float ``` # 组件 ## Upload图片上传 #### 属性 | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------ | --------------------------------------- | ------- | --------------------------- | ------------- | | name | 上传的文件字段名 | String | | file | | url | (必传)后台上传地址 | String | | | | headers | 头信息 | Object | | | | fileData | 额外参数 | Object | | | | listType | 文件列表的类型 | String | text picture picture-card | picture-card | | fileList | 默认图片，传入格式["http...",""] | Array | | | | limit | 最多限制上传几张图片 | Number | | 1 | | multiple | 是否多选 | Boolean | | false | | disabled | 是否禁用 | Boolean | | false | | tips | 提示文字 | String | | | | size | 图片大小限制在几兆 | Number | | 2 | | autoUpload | 是否在选取图片后立即上传 | Boolean | | false | | showFileList | 是否显示已上传列表 | Boolean | | true | | uploadText | 上传图片按钮文本 | String | | 上传图片 | | drag | 是否启用拖拽上传 | Boolean | | false | | dragIcon | 拖拽上传的图标 | String | | el-icon-upload | | dragText | 拖拽上传的文本，可传入HTML | String | | 将图片拖到此处，或点击上传 | #### 事件 | 方法名 | 说明 | 参数 | | ---------------- | ------------------------------- | --------------------------------------- | | on-success | 上传成功 | 后台返回的json字符串 | | on-error | 上传失败 | 上传失败的Object | | on-validateError | 图片大小验证未通过 | 自己传入的size值 | | on-choice | 没有立即上传时，返回当前的图片列表 | fileList | | on-exceed | 文件超出个数限制时 | files, fileList | ## Paging分页 #### 属性 | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---------------- | --------------------------- | ------ | --------------------------------------- | ----------------------------------------- | | total | 总条数 | Number | | 0 | | page | 当前页 | Number | | 1 | | pageSize | 每页显示条目个数 | Number | | 10 | | pageSizes | 每页显示个数选择器的选项设置 | Array | | [10, 20, 30, 40] | | layout | 组件布局，子组件名用逗号分隔 | String | total sizes prev pager next jumper slot | "total, sizes, prev, pager, next, jumper" | | background | 是否带背景色 | Boolean | | true | | disabled | 是否禁用 | Boolean | | false | | hideOnSinglePage | 只有一页时是否隐藏 | Boolean | | false | #### 事件 | 方法名 | 说明 | 参数 | | ---------------- | ---------------------- | --------------------------------------- | | on-change | 每页条数、页码改变时触发 | 包含页码、每页条数对象 | #### Slot | name | 说明 | | ---- | -------------------------------- | | — | 自定义内容，需要在 layout 中列出 slot | ## Confirm弹框注意：使用此组件前，需要绑定到vue原型上，具体操作看最上面 “引入” ``` this.$cswConfirm('确定是否退出登录', true, 'success', '确定', '取消') .then(()=>{ console.log("退出成功") }) .catch(() => { console.log("取消") }) ``` #### 参数 | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------ | --------------- | ------- | --------------------------- | -------- | | 参数1 | 提示内容 | String | | | | 参数2 | 是否显示取消按钮 | Boolean | | true | | 参数3 | 状态 | String | success info warning error | warning | | 参数4 | 确定按钮文本 | String | | 确定 | | 参数5 | 取消按钮文本 | String | | 取消 | ## Dialog弹框 #### 属性 | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------- | ---------------------------- | ------- | ----------------- | ------------- | | title | 标题 | String | | | | visible.sync | 是否显示，必须带.sync | Boolean | | false | | width | 宽度，值必须带单位：% px | String | | 60% | | appendToBody | Dialog 是否插入至 body 元素上 | Boolean | | false | | showClose | 是否显示关闭图标 | Boolean | | true | | center | 是否对头部和底部采用居中布局 | Boolean | | true | | btnCount | footer显示几个按钮 | Number | 0 1 2 3 | 2 | | closeText | 取消按钮文本 | String | | 取消 | | confirmText | 确认按钮文本 | String | | 确认 | | otherText | 其他按钮文本 | String | | 其他 | #### 事件 | 方法名 | 说明 | 参数 | | ---------- | ---------------------- | --------------------------------------- | | confirm | 确定按钮 | | | cancel | 关闭弹框回调 | | | other | 其他按钮回调 | | ## Select选择器 ``` 选中项时，获取所选中项的key与value ``` #### 属性 | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------- | ------------------ | ------- | ------------------ | --------------------- | | options | 选择器列表 | Array | | | | label | 自定义 label 的 key | String | | label | | value | 自定义 vaule 的 key | String | | value | | size | 选择器大小 | String | medium small mini | small | | clearable | 是否可以清空选项 | Boolean | | false | | filterable | 是否可搜索 | Boolean | | false | | placeholder | 占位符 | String | | 请选择 | | disabled | 是否禁用 | Boolean | | false | | popperClass | Select 下拉框的类名 | String | | | #### 事件 | 方法名 | 说明 | 参数 | | ---------- | ------------ | --------------------------------------- | | on-change | 内容改变事件 | 选中项包含key value的对象 | ## TinyMCE富文本编辑器 ``` tinymce需要的额外静态文件（css与中文语言包）获取到的tinymce文件夹放在静态文件夹中可在(https://gitee.com/chenswei/csw-element-ui/tree/master/public/static)获取注意：插件与工具栏可选值请参考：http://tinymce.ax-z.cn/ ``` #### 属性 | 参数 | 说明 | 类型 | 默认值 | | ------------- | ----------------- | ------------ | -------------------------------- | | value | v-model绑定 | String | | | width | 宽度 | Number | 900 | | height | 高度 | Number | 400 | | fontsizes | 文字大小 | String | 10px 12px 14px 16px 18px 24px... | | fontfamily | 字体 | String | Arial=arial;宋体=宋体;苹方=苹方... | | lineheight | 行高 | String | 1 1.5 2 3 4 5 | | plugins | 插件(用空格隔开) | String | lists link image fullscreen... | | toolbar | 工具栏(用空格隔开) | String | bold italic underline... | | menubar | 开启最上方菜单 | Boolean | true | | statusbar | 开启底部状态栏 | Boolean | true | #### 事件 | 方法名 | 说明 | 参数 | | ---------- | ------------ | --------------------------------------- | | on-change | 内容改变事件 | content | #### 内置方法 ``` 需使用ref调用该方法 ``` | 方法名 | 说明 | 参数 | | ---------- | ------------ | --------------------------------------- | | clear | 清空数据 | | ## Sort排序 ![image](./images/sort.png) #### 属性 | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------ | ---------------------------------------------------------- | ------- | ------- | -------- | | list | 格式：[{ name: '综合', type: 1 }] name：文本；type：不限类型 | Array | | | #### 事件 | 方法名 | 说明 | 参数 | | ---------- | ------------ | --------------------------------------------------------- | | on-change | 当前项点击事件 | 当前传入项对象，sort：排序类型 1 上 2 下 0 取消 | #### 内置方法 ``` 需使用ref调用该方法 ``` | 方法名 | 说明 | 参数 | | ---------- | -------------------- | --------------------------------------- | | clear | 清除列表所有项点击效果 | | # 指令 #### 防抖指令 v-debounce ``` 只执行最后一次防抖提交可传入延迟时间参数，默认500毫秒 v-debounce:2000 ``` #### 节流指令 v-throole ``` 控制执行次数节流提交可传入延迟时间参数，默认1000毫秒 v-throole:2000 ``` #### Input自动获取焦点 v-focus ``` ``` #### 浮点数 v-float ``` v-float:3 接收一个参数，显示几位小数点，传值区间（1-6）大于 6 时，返回两位小数点，默认两位小数点 ``` # 更新日志 ``` ## # 1.0.0 组件封装完成 # 1.3.0 新增TinyMCE富文本编辑器组件 # 1.3.2 新增4个自定义指令 # 1.3.3 新增Select选择器 # 1.3.6 优化打包发布体积 # 1.3.9 新增Sort排序 ``` ### 链接 [博客园](https://www.cnblogs.com/chensv) [gitee](https://gitee.com/chenswei/csw-element-ui)