❤
npm
Sign UpSign In

ele-control

2.0.3 • Public • Published

依赖

[ vue ] [ elementui ]

安装

[ npm install command ]

$ 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

导出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: 将带小数点的数字切割成整数和小数部分
    • @param text {String||Number} 要传文本
    • @param digits {Number} 默认是2位小数点
    • @return {Array} 返回一个数组，Array[0]是整数部分，Array[1]是小数部分，
  • formatNumber: 将带小数点的数字切割成整数和小数部分
    • @param text {String||Number} 要传文本
    • @param digits {Number} 默认是2位小数点
    • @return {Array} 返回一个数组，Array[0]是整数部分，Array[1]是小数部分，
  • 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，请不要随意安装该包

Readme

Keywords

Package Sidebar

Install

npm i ele-control

Weekly Downloads

1

Version

2.0.3

License

none

Unpacked Size

154 kB

Total Files

29

Last publish

Collaborators

  • z-clown
  • iwasaki_yuuta
Try on RunKit
Report malware