2.0.3 • Published 2 years ago
ele-control v2.0.3
依赖
安装
$ npm install ele-control
import EleControl from 'ele-control';
Vue.use(EleControl);组件
图片
<g-image></g-image>props
fuzzy: {Boolean} 是否模糊虚化，默认为false
... 其它参数参考 el-image表单
<g-form v-mode="formData"></g-form>根据表单数据生成表单
props
- v-mode:{Object(key:itemData)} 绑定的表单数据 key : 表单数据formData的key值代表数据key值
- edit:{Boolean} 表单是否编辑状态,默认为false
itemData: 表单控件项配置
- show:{Boolean} 该控件是否显示,默认值为true
- disabled:{Boolean} 该控件是否可以编辑,默认值为true
edit:{Boolean} 该控件是否编辑状态,默认值为true,该等级高于form的edit属性
col:{Number} 栅格占据的列数
- offset:{Number} 栅格左侧的间隔格数
- push:{Number} 栅格向右移动格数
cut:{Number} 栅格右侧的间隔格数
label:{String|Boolean} 控件label,值为false时该不显示label
- labelWidth: {String} 控件label宽度，默认值为 160px
- type:{String} 控件类型，支持element表单控件type，element控件没有type属性则为控件名称。如果传入不存在的类型则会创建一个slot供使用则提供该类型的内容
- verify: {Boolean} 该控件是否需要校验,默认值为false
- rules: {Array} 控件验证规则，如果不传递并且 verify 为 true 则会走默认验证
- options:{Array(lable-value)} 选择项，当type为 radio 或 checkbox 或 cascader 时必填
method
- validate: 表单验证
- validateField(...fun): 表单项验证
- resetFields: 表单重置
- clearValidate: 清空表单验证
- getdictData:(key:value) 提取模块数据
- setDictsData:(key:value) 填入模块数据
表格
<g-table></g-table>props
- config:{Object} 请求数据表格参数配置
- url:'' 请求路径
- method: '' 请求方式,默认'GET'
- where:{} 请求携带参数
- pageParam: (data) => { return {} } 格式化请求参数
- parseData:(data)=>{return {}},= 格式化返回数据
- requestMethod:{Function}ajax请求方法体 (如果不传默认用this.$http.request)
- data:{Array} 前端分页请求直接指定数据
- choose:{Array} 列表选中数据(多选)
- current:{Object} 列表选中数据(单选)
- servePage:{Boolean} 强制后端分页
- 继承element-table参数
https://element.eleme.io/#/zh-CN/component/table 继承element-pagination参数
https://element.eleme.io/#/zh-CN/component/pagination预览文档
<g-file-pvw></g-file-pvw>props
- url:{String} 文件路径
type:{String} 文件类型(不传递则取url后缀)
预览docx
<g-word-pve></g-word-pve>props
url:{String} 文件路径
预览excel
<g-xlsx-pvw></g-xlsx-pvw>props
url:{String} 文件路径
预览pdf
<g-pdf-pvw></g-pdf-pvw>props
- url:{String} 文件路径
方法
导出Word文档
import { exportWord } from "ele-control"
exportWord(tempDocxPath,data,fileName) props
- tempDocxPath:{String} 模板文件路径，相对于public文件夹
模板语法请查看 docxtemplater - data:{Object}} 导出文件数据数据
- fileName:{String} 导出文件名
导出pdf
import { exportPdf } from "ele-control"
exportPdf(pdfDom,fileName)props
- pdfDom:{Element}} 导出元素
- fileName:{String} 导出文件名
导出excel
import { exportExcel } from "ele-control"
exportExcel(fileName,option={//表格配置
colms:[{name:"标题",prop:"title"}]//列配置
data:[],//导出数据
merges:[].// 合并单元格配置
})props
- fileName:{String} 导出文件名
option:{Object} 导出文件名
- colms:{Array} 列配置{name:"标题",prop:"title"}或[{name:"标题",prop:"title"}]
- data:{Array} 导出数据
- merges:{Array} 合并配置，例如'A1:A2', 'B1:C1', 'D1:E1', 'F1:F2', 'G1:H1', 'I1:J1', 'K1:K2'
工具方法-tools
import { tools } from "ele-control"- extractObject: 提取字段
- @param keys {Array} 要提取的字段
- @param Obj {Array/Object} 提取源对象
- @return {Array/Object} 返回提取后对象
- getKeyGather: 提取字段
- @param keys {Array} 要提取的字段
- @param Obj {Array/Object} 提取源对象
- @return {Array} 返回提取后对象
- debounce: 提取字段
- @param fn {Function} 实际要执行的函数
- @param delay {Number} 延迟时间，也就是阈值，单位是毫秒（ms）
- @return {Function} 返回一个“去弹跳”了的函数
- debounce: 延时执行函数
- @param fn {Function} 实际要执行的函数
- @param delay {Number} 延迟时间，也就是阈值，单位是毫秒（ms）
- @return {Function} 返回一个“去弹跳”了的函数
- formatNumber: 将带小数点的数字切割成整数和小数部分
- formatNumber: 将带小数点的数字切割成整数和小数部分
- createUUID: 生成随机uiId
- deepMerge: 两个对象的深度合并
- @param {*} obj1 拷贝对象1
- @param {*} obj2 拷贝对象2
- browser: 获取浏览器信息
- nextFixZero: 向后补零
- @param num： 被操作数
- @param n： 固定的总位数
- thousandFormat 千位加,号
- formatTenThousandText 格式化万位文本显示
- @param num{number}
- @returns {string|*}
- dealObjectValue 处理对象参数值，排除对象参数值为”“、null、undefined，并返回一个新对象
- scrollIntoView 滚动到某个元素
- @param {*} container 容器
- @param {*} selected 某个节点
- equals 对比两个对象
- @param {Array || Object} oldVal 数据1
- @param {Array || Object} newVal 数据2
- @returns Boolean 是否有变化
- getBase64Sync 将图片的url路径转为base64路径
- @param {Sting}} imgUrl 图片路径
- @returns base64 图片体
- countdown 倒计时
- @param endTime 结束时间
- @param serverTime 服务端当前时间
- @param callback 回调
- @returns {number} 定时器实例
- timeAgo 某个时间在当前时间的多久前
- @param time 需要语义化的时间
- @param onlyDate {Boolean} 超过30天是否仅返回日期
- @returns {string} 语义化后的时间
- digit 数字前置补零
- @param num 数字
- @param length 位数
- @returns {string}
- toDateString 转化为日期格式字符
- @param time 时间
- @param format 格式
- @returns {string}
- escape html转义, 防止xss攻击
- @param html 需要转义的字符串
- @returns {string}
- fullScreen 让浏览器全屏切换
- @returns {Element|*|boolean} 是否是全屏状态
- screenWidth 获取屏幕宽度
- @returns {number}
- screenHeight 获取屏幕高度
- @returns {number}
- htmlToText html转text
- @param html
- @returns {*}
- device 获取设备信息
- @param key 自定义的 agent 例如是否为ios
- @returns {{weixin: *, os: (string|undefined), ie: boolean}} | {Boolean}
- uuid 生成随机id
- @param length 长度
- @returns {string}
- random 生成m到n的随机数，不包含n
- @param m 最小值
- @param n 最大值
- @returns {number}
- bd09ToGcj02 百度地图坐标转高德地图坐标
- @param point 坐标
- @returns {{lng: number, lat: number}}
- gcj02ToBd09 高德地图坐标转百度地图坐标
- @param point 坐标
- @returns {{lng: number, lat: number}}
- deepClone 深度克隆对象
- @param obj
- @returns {{}|*}
- typeOf 获取变量类型
- @param obj
- @returns 获取变量类型
- play 音频地址
- @param url 音频地址
htmlIsBlank 判断富文本是否为空
@param html 富文本
校验-validate
import { validate } from "ele-control"
validate.isExternal(url)- param
- @param {string} value
- @returns {Boolean}
- isExternal 是否为外网
- isPhone 是否是手机号
- isTel 是否为固话
- isEmail 是否是邮箱
- validEmail 是否是邮箱
- isUrl 是否是网址
- validUrl 是否是网址
- isNumber 是否是数字
- isDate 是否是日期
- isIdentity 是否是身份证
- isDigits 是否是整数
- isDigitsP 是否是正整数
- isDigitsN 是否是负整数
- isDigitsPZ 是否是非负整数(正整数或0)
- isDigitsNZ 是否是非正整数(负整数或0)
- maxMinLength 验证最小长度、最大长度
- maxMin 验证最小值、最大值
- isChinese 是否是中文
- isPort 是否是端口号
- isIP 是否是IP
- isLongitude 是否是经度 -180.0～+180.0（整数部分为0～180，必须输入1到5位小数）
- isLatitude 是否是纬度 -90.0～+90.0（整数部分为0～90，必须输入1到5位小数）
- isIdentityStrong 是否是身份证(强校验)(大陆)
- checkHKIDcard 验证身份证（香港）
- checkIdCard 身份证验证（台湾
- isMobile 验证手机号
- isInt 正整数验证
提示
菜鸟学些npm，请不要随意安装该包