依赖

[ vue ] [ element plus ]

安装

[ npm install command ]

$ npm install ele-plus-control

import ElePlusControl from 'ele-plus-control';
Vue.use(ElePlusControl);

组件

图片

<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-pvw-file></g-pvw-file>

props

• url:{String} 文件路径

• type:{String} 文件类型(不传递则取url后缀)

  预览docx

<g-pve-word></g-pve-word>

props

• url:{String} 文件路径

  预览excel

<g-pvw-xlsx></g-pvw-xlsx>

props

• url:{String} 文件路径

  预览pdf

<g-pvw-pdf></g-pvw-pdf>

props

• url:{String} 文件路径

方法

导出Word文档

import { exportWord } from "ele-plus-control"  
exportWord(tempDocxPath,data,fileName)  

props

• tempDocxPath:{String} 模板文件路径，相对于public文件夹
  模板语法请查看 docxtemplater
• data:{Object}} 导出文件数据数据
• fileName:{String} 导出文件名

导出pdf

import { exportPdf } from "ele-plus-control"
exportPdf(pdfDom,fileName)

props

• pdfDom:{Element}} 导出元素
• fileName:{String} 导出文件名

导出excel

import { exportExcel } from "ele-plus-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']

下载Word文档文件流

import {downloadWord} from 'ele-plus-control'
downloadWord(params, parseData) 

props

• params:{Object} axios请求设置 params.name 文件名
• parseData:{function}} 导出文件数据数据格式方法 return data

下载pdf文件流

import {downloadPdf} from 'ele-plus-control'
downloadPdf(pdfDom,fileName)

props

• params:{Object} axios请求设置 params.name 文件名
• parseData:{function}} 导出文件数据数据格式方法 return data

下载excel文件流

import {downloadExcel} from 'ele-plus-control' 
downloadExcel(pdfDom,fileName)

props

• params:{Object} axios请求设置 params.name 文件名
• parseData:{function}} 导出文件数据数据格式方法 return data

工具方法-tools

import { tools } from "ele-plus-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-plus-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，请不要随意安装该包