Csw-element-ui NPM

csw-element-ui

介绍

  基于VUE2二次封装的Element-UI

安装

  npm install csw-element-ui

引入

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

指令序列

  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与中文语言包）
  可在(https://gitee.com/chenswei/csw-element-ui/tree/vuecli2/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 Array
toolbar	工具栏	String Array
menubar	开启最上方菜单	Boolean	true
statusbar	开启底部状态栏	Boolean	true

事件

方法名	说明	参数
on-change	内容改变事件	content

内置方法

  需使用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.2.0
      vue-cli脚手架降版本打包
      
    # 1.3.0
      新增TinyMCE富文本编辑器组件
      
    # 1.3.2
      新增4个自定义指令
      
    # 1.3.3
      新增Select选择器