eagle-vue-ui v3.18.5

eagle ui

# 前提：项目中已引入 vue & element-ui

# 安装：npm install eagle-vue-ui

# 引入：

      import eagle from 'eagle-vue-ui';

      Vue.use(eagle);

# API调用：

      以 saasGet 调用为示例：this.eagle.saasGet('xx',{},()=>{},()=>{})

支持的组件

文件上传 eagle-upload

/**
 * dev { string } 服务的平台 必填
 *     可选值:
 *         saas 默认值 服务于saas前台，指定上传接口：api/v2.services/upload
 *         saas-admin 服务于saas后台，指定上传接口：factory/customized.upload/ImgUpload
 * type { string } 上传类型 必填
 *     可选值：
 *          1. element单图上传至oss
 *          2. element单图自定义上传 & file对象 上传
 *          3. element单图自定义上传 & base64 上传
 *          4. element上传excel文件 & 单选
 *          5. 自定义批量上传图片（一次上传）- 固定UI
 *          6. 自定义批量上传图片（多次回调）- 非固定UI
 *          7. 自定义批量上传图片（一次回调）- 非固定UI
 *          8. element上传psd文件 & 单选
 * token { string } header身份校验
 *       根据使用的type类型决定是否必填。必填：1,2,4,8
 * url   { string } 接口地址
 *       根据使用的type类型决定是否必填。必填：4,8
 * upload_excel_button_text { string } 文件上传按钮的文字
 *                          该值适用于4 & 8 类型
 * recordCache { string } 是否记录缓存
 *             该值适用于5 & 7 类型
 * isWatermark { string } 是否添加水印
 *             0 默认值，不添加水印
 *             1 添加水印
 *             该值适用于 3
 * watermarkType { string } 水印类型
 *               img：默认值，图片水印，即水印图
 *               text：文字水印
 * watermarkText { string } 文字水印的内容
 *               默认值：自定义水印。1~12个字符，若超出，自动截取前12个文字
 * watermarkColor { string } 文字水印的颜色
 *                默认值：rgba(0,0,0,0.5)。支持 rgb & 英文单词 & 颜色编码
 * watermark { string } 水印图
 *            已有默认图。可传base64（推荐） 或者 在线链接
 * align { string } 水印的位置
 *       tilt：默认值，倾斜居中
 *       top：顶部居中
 *       center：上下居中
 *       bottom：底部居中
 * imgSrc { string } 默认显示的图片
 *        该值默认为空，显示 ‘ + ’。可传递在线图片链接，服务于回显功能
 *        适用场景：type 1,2,3
 * uploadData(e) { function } 上传回调
 */
<eagle-upload dev='saas' isWatermark='0' type='1' :token='token' @uploadData='uploadData' />

<eagle-upload dev='saas' type='2' :token='token' @uploadData='uploadData' />

默认不添加水印
<eagle-upload type='3' isWatermark='0' @uploadData='uploadData' />
添加图片水印，返回data:在线链接 + img:base64
<eagle-upload type='3' isWatermark='1' :token='token' @uploadData='uploadData' />
添加文字水印，返回data:在线链接 + img:base64
<eagle-upload type='3' isWatermark='1' :token='token' watermarkType='text' @uploadData='uploadData' />

<eagle-upload dev='saas' type='4' :token='token' :url='url' @uploadData='uploadData' />

<eagle-upload type='5' recordCache='1' @uploadData='uploadData' />

<eagle-upload type='6' @uploadData='uploadData' />

<eagle-upload type='7' recordCache='0' @uploadData='uploadData' />

<eagle-upload dev='saas' type='8' :token='token' :url='url' @uploadData='uploadData' />

定制化指定地址批量上传 eagle-erp

/**
 * token { string } 身份校验
 * uploadData(e) { function } 上传回调
 */
<eagle-erp :token='token' @uploadData='uploadData'/>

定制化拖拽上传 eagle-drag

/**
 * token { string } 身份校验
 * url { string } 上传地址
 *     若该值传空，则返回file对象和base64数据
 * dev { string } 类型，可选值：
 *     saas：服务于saas平台
 *     erp：服务于第三方平台
 * uploadData(e) { function } 上传回调
 */
<eagle-drag :dev='dev' :source='source' :url='url' :token='token' @uploadData='uploadData'/>

通用型手写签名 eagle-autograph

/**
 * width { string } 操作区域的宽度
 * height { string } 操作区域的高度
 * isCrop { bool } 是否裁剪
 * lineWidth { int } 笔宽
 * lineColor { string } 文字的颜色
 * bgColor { string } 操作区域的背景色
 */
<eagle-autograph ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />

lineWidth: 6,
lineColor: '#000000',
bgColor: '#f2f2f2',
isCrop: false,
img:''

清除签名
    this.$refs.esign.reset()
获取签名
    this.$refs.esign.generate().then(res => {
       console.log('签名的base64图片',res) // base64图片
       this.img = res;
     }).catch(err => {
       alert(err) // 画布没有签字时会执行这里 'Not Signned'
     })

支持的API

  # GET请求

  API：saasGet($url, $data, callback, failBacks)

       $url:接口地址，只要 . 后面的部分

       $data:参数

       callback：成功的回调

       failBacks：失败的回调

       注：saas前台项目的接口请求，跨域配置：代理名 /saas

  # POST请求

    API：saasPost($url, $data, callback, failBacks)

         $url:接口地址，只要 . 后面的部分

         $data:参数

         callback：成功的回调

         failBacks：失败的回调

         注：saas前台项目的接口请求，跨域配置：代理名 /saas

  # 特殊的请求：请求二进制excel数据

    API：saasExportExcel($url, $data, callback, failBacks)

         $url:接口地址，只要 . 后面的部分

         $data:参数

         callback：成功的回调

         failBacks：失败的回调

         注：saas前台项目的接口请求，跨域配置：代理名 /saas

  # 下载在线图片

    API：downloadImg($src,$name)

         $src:在线图片的url

         $name:下载图片的图片名

  # 下载在线表格

    API：downWebExcel($src,$name)

         $src:在线表格的url

         $name:下载表格的表格名

  # 下载二进制表格

    API：downExcel($data,$name)

         $data:下载表格的Excel数据

         $name:下载表格的表格名

  # 去除当前字符串的所有空格

    API：clearEmpty($str)

         $str:指定字符串

  # 精准计算 - 加

    API：sumNumber($num1,$num1)

         $num1:相加的第一个数字

         $num2:相加的第二个数字

  # 精准计算 - 减

    API：reduceNumber($num1,$num1)

         $num1:相减的第一个数字

         $num2:相减的第二个数字

  # 精准计算 - 乘

    API：accNumber($num1,$num1)

         $num1:相乘的第一个数字

         $num2:相乘的第二个数字

  # 精准计算 - 除

    API：accDiv($num1,$num1)

         $num1:相除的第一个数字

         $num2:相除的第二个数字

  # 获取url参数

    API：getUrlParams()

  # 时间戳转化时分秒

    API：getTimeDetail($time)

         $time:时间戳

  # 一维数组去重

    API：getRepertList($list)

         $list:数组。如：['1','2','3','1']

  # 获取数组和

    API：getSum($list)

         $list:数组。如：[1,2,3]

  # 获取图片信息

    API：getImgDetail($url)

         $url:图片的地址。该API返回图片的宽高数据

  # PC端复制文本

    API：copyText($str)

         $str:要复制的字符串文本

  # 批量将图片url转化为base64数据

    API：urlToBase64All($list,$bool,callback)

         $list:图片数组。如：['xx.jpg','xx.jpg']

         $bool:固定传空数组，用于校验

         callback：回调

  # 常用的正则表达式

    API：rualList($str,$type)

         $str:匹配的数据

         $type:类型。可选字段：

               email：邮箱

               tel：手机号

               grade1：纯数字。一般用于验证低安全性密码

               grade2：数字和26个英文字母组成的字符串。一般用于验证中安全性密码

               grade3：数字、26个英文字母和下划线组成的字符串。一般用于验证高安全性密码

  # message 提示语

    API：messageModule($msg,$type)

         $msg:要显示的文本提示语

         $type:类型。可选值：

                           success:成功

                           fail:失败

                           warning:警告

  # module 确认弹窗

    API：confirmModule($mag,$success,$fail)

         $msg:要显示的文本提示语

         $success:成功的回调

         $fail:失败的回调

  # 禁止打开控制台

    API：disabledDefault

  # 图片添加水印

    API：setImgWatermark($data)

         $data：{

           url:要添加水印的图片，必填。在线url 或者 base64数据（推荐）

           width:合成图的宽，非必填。默认180

           height:合成图的高，非必填。默认180,

           watermark:水印图，非必填,

           align:位置，非必填。默认tilt：倾斜居中，可选值：

                 top：顶部居中

                 center：上下左右居中

                 bottom：底部居中

           getImg($img){

             $img：合成图的回调

           }

         }