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)

使用

  组件内直接使用组件
  <csw-upload></csw-upload>

组件序列

  1.Upload图片上传
    <csw-upload></csw-upload>

  2.Paging分页
    <csw-paging></csw-paging>

  3.Confirm弹框
    this.$cswConfirm()

  4.Dialog弹框
    <csw-dialog></csw-dialog>
  
  5.Select选择器
    <csw-select></csw-select>

  6.TinyMCE富文本编辑器
    <csw-tinymce></csw-tinymce>
  
  7.Sort排序
    <csw-sort></csw-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排序

属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------ | ---------------------------------------------------------- | ------- | ------- | -------- | | list | 格式：[{ name: '综合', type: 1 }] name：文本；type：不限类型 | Array | | |

事件

| 方法名 | 说明 | 参数 | | ---------- | ------------ | --------------------------------------------------------- | | on-change | 当前项点击事件 | 当前传入项对象，sort：排序类型 1 上 2 下 0 取消 |

内置方法

  需使用ref调用该方法

| 方法名 | 说明 | 参数 | | ---------- | -------------------- | --------------------------------------- | | clear | 清除列表所有项点击效果 | |

指令

防抖指令 v-debounce

  只执行最后一次
  <el-button v-debounce="submit">防抖提交</el-button>
  可传入延迟时间参数，默认500毫秒
  v-debounce:2000

节流指令 v-throole

  控制执行次数
  <el-button v-throole="submit">节流提交</el-button>
  可传入延迟时间参数，默认1000毫秒
  v-throole:2000

Input自动获取焦点 v-focus

  <el-input v-focus />

浮点数 v-float

  <el-input type="text" 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排序

链接

博客园 gitee