drag-dialog指令会在dialog隐藏后复原dialog的位置

代码优化

部分变量名称修改

vue/src/component/UploadFile/index.vue

@@ -211,7 +211,7 @@ export default {
             }
             const maxSize = parseMaxSize(this.maxSize)
             if (file.size > maxSize) {
-                elError(`${file.name}的大小超出${this.$options.filters.numberFormatter(maxSize)}`)
+                elError(`${file.name}的大小超出${this.$options.filters.number2StorageUnit(maxSize)}`)
                 return false
             }
         },

vue/src/directive/dragDialog.js

@@ -1,9 +1,9 @@
 export default {
-    bind(el) {
+    bind(el, bind, vnode) {
         const dialogHeaderEl = el.querySelector('.el-dialog__header')
         const dragDom = el.querySelector('.el-dialog')
-        dialogHeaderEl.style.cssText += ';cursor:move;'
+
-        dragDom.style.cssText += ';top:0px;'
+        dialogHeaderEl.style.setProperty('cursor', 'move')
 
         dialogHeaderEl.addEventListener('mousedown', e => {
             // 鼠标按下，计算当前元素距离可视区的距离
@@ -55,7 +55,8 @@ export default {
                 }
 
                 // 移动当前元素
-                dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
+                dragDom.style.setProperty('left', `${left + styL}px`)
+                dragDom.style.setProperty('top', `${top + styT}px`)
             }
 
             function onMouseup() {
@@ -66,5 +67,16 @@ export default {
             window.addEventListener('mousemove', onMousemove)
             window.addEventListener('mouseup', onMouseup)
         })
+
+        function resetStyle() {
+            dragDom.style.removeProperty('left')
+            dragDom.style.removeProperty('top')
+        }
+
+        //当dialog关闭时恢复原位
+        vnode.componentInstance.$on('closed', resetStyle)
+        vnode.componentInstance.$once('hook:beforeDestroy', () => {
+            vnode.componentInstance.$off('closed', resetStyle)
+        })
     }
 }

vue/src/filter/index.js

@@ -1,32 +1,33 @@
 import {isEmpty, timeFormat} from '@/util'
 
+//时间戳格式化
 export function timestamp2Date(timestamp) {
     if (isEmpty(timestamp)) return ''
     return timeFormat(null, new Date(timestamp))
 }
 
-//经过多长时间，单位秒，最低时间为分钟
+//秒数格式化，最低时间为分钟
-export function timePass(time) {
+export function secondFormat(time) {
     if (!time || isNaN(time)) return ' NaN'
     if (time < 3600) return ~~(time / 60) + ' 分'
-    else if (time < 86400) return ~~(time / 3600) + ' 小时'
+    if (time < 86400) return ~~(time / 3600) + ' 小时'
-    else return ~~(time / 86400) + ' 天'
+    return ~~(time / 86400) + ' 天'
 }
 
-export function timeAgo(time) {
+//格式化当前和给定的时间戳之间的秒数差
+export function secondBetweenFormat(time) {
     const between = Date.now() / 1000 - Number(time)
-    if (between < 3600) {
+    return secondFormat(between)
-        return ~~(between / 60) + ' 分钟'
-    }
-    else if (between < 86400) {
-        return ~~(between / 3600) + ' 小时'
-    }
-    else {
-        return ~~(between / 86400) + ' 天'
-    }
 }
 
-export function numberFormatter(num, digits = 2) {
+/**
+ * 数字转存储单位，1024 => KB
+ *
+ * @param num {number}
+ * @param digits {number}  保留几位小数
+ * @return {string}
+ */
+export function number2StorageUnit(num, digits = 2) {
     if (isEmpty(num)) return ''
     const si = [
         {value: 1024 * 1024 * 1024 * 1024, symbol: 'TB'},
@@ -62,6 +63,6 @@ export function uppercaseFirst(string) {
 
 export default function (Vue) {
     Object
-        .entries({timestamp2Date, timePass, timeAgo, numberFormatter, toThousandFilter, uppercaseFirst})
+        .entries({timestamp2Date, secondFormat, secondBetweenFormat, number2StorageUnit, toThousandFilter, uppercaseFirst})
         .forEach(([key, value]) => Vue.filter(key, value))
 }

vue/src/util/auth.js

@@ -40,7 +40,7 @@ export function auth(path) {
  * what i can
  * 批量生成canXxx的计算属性
  *
- * @param apiMap  <key:接口名称，value:接口对象>
+ * @param apiMap {object}  <key:接口名称，value:接口对象>
  * @return {object}
  */
 export function wic(apiMap) {

vue/src/util/browser.js

@@ -165,14 +165,13 @@ export function scrollIntoViewVertically(child, parent = window) {
  *
  * @param el {Window|HTMLElement|string|function} 滚动容器，或可用于querySelector的字符串，或一个返回DOM的函数
  * @param position {number} 滚动的目的地
- * @param options
+ * @param options 配置项
+ *     @param options.callback {function} 滚动完成的回调
+ *     @param options.duration {number} 滚动耗时
+ *     @param options.direction {string} 滚动方向，top滚动至距元素顶部distance的位置，left滚动至距元素左边distance的位置
  */
 export function scrollTo(el, position, options) {
-    const {
+    const {callback, duration = 300, direction = 'top'} = options || {}
-        callback,          //滚动完成的回调
-        duration = 300,    //滚动耗时
-        direction = 'top'  //滚动方向，top滚动至距元素顶部distance的位置，left滚动至距元素左边distance的位置
-    } = options || {}
 
     if (typeof el === 'string') {
         el = document.querySelector(el)

vue/src/util/excel/common.js

@@ -8,14 +8,16 @@ import {flatTree} from "@/util/tree"
  * 导出excel的抽象模板
  * 响应头为json时进行前端导出，否则直接下载文件
  *
- * @param url              搜索的请求地址
+ * @param url {string}                 搜索的请求地址
- * @param searchForm       搜索参数
+ * @param params {*}                   向后台发送请求时携带的参数
- * @param options          {object}，只有前端导出时才需要
+ * @param options                      前端导出时需要的配置项
- * @param json2workbook    将json数据转换为workbook的函数，参考./exceljs.js #json2workbook
+ *     @param options.columns {array}  json2workbook所需参数
- * @param workbook2excel   workbook对象转换为excel文件，参考./exceljs.js #workbook2excel
+ *     @param options.merge {object}   json2workbook所需参数
+ * @param json2workbook {function}     将json数据转换为workbook的函数，参考./exceljs.js #json2workbook
+ * @param workbook2excel {function}    workbook对象转换为excel文件，参考./exceljs.js #workbook2excel
  */
-export function abstractExportExcel(url, searchForm, options, json2workbook, workbook2excel) {
+export function abstractExportExcel(url, params, options, json2workbook, workbook2excel) {
-    request({url, method: 'post', responseType: 'blob', data: searchForm})
+    request({url, method: 'post', responseType: 'blob', data: params})
         .then(({headers, data}) => {
             const contentType = headers['content-type']
             const contentDisposition = headers['content-disposition']
@@ -40,11 +42,11 @@ export function abstractExportExcel(url, searchForm, options, json2workbook, wor
  * 合并excel
  * 此方法会修改原始json数据（重写序号）
  *
- * @param props        需要合并的字段数组，用于映射json
+ * @param props {array}         需要合并的字段名数组，用于映射json
- * @param data         json数组
+ * @param data {array}          json数组
- * @param primaryKey   该行json的唯一标识字段名
+ * @param primaryKey {string}   该行json的唯一标识字段名
- * @param orderKey     该行json的序号字段名
+ * @param orderKey {string}     该行json的序号字段名
- * @param ignoreRows   忽略的行数，默认为1（忽略表头）
+ * @param ignoreRows {number}   忽略的行数，默认为1（忽略表头）
  * @return {array}              包含合并信息的数组，形如['A1:A10',...]
  */
 export function mergeExcel(props, data, primaryKey, orderKey, ignoreRows = 1) {
@@ -122,8 +124,8 @@ export function mergeExcel(props, data, primaryKey, orderKey, ignoreRows = 1) {
  * 生成表头的二维数组以及合并结果
  * 参考element的table-header
  *
- * @param columns     列配置
+ * @param columns {array}      列配置
- * @param separator   分隔符
+ * @param separator {string}   分隔符
  * @return {{header: [], mergeCells: []}}
  */
 export function generateHeader(columns, separator = '-') {
@@ -209,8 +211,8 @@ export function generateHeader(columns, separator = '-') {
 /**
  * 生成二维数组，例如json为[{id:1,name:'x'}]，结果为[[1,'x']]
  *
- * @param data     json数组
+ * @param data {array}      json数组
- * @param propMap  表头和字段名的映射表
+ * @param propMap {object}  表头和字段名的映射表，propMap[字段名]=对应的表头的数组下标
  * @return {array}          基数组为excel中每一行的二维数组
  */
 export function jsonArray2rowArray(data, propMap) {

vue/src/util/excel/exceljs.js

@@ -30,8 +30,8 @@ const defaultHeaderStyle = {
 /**
  * excel导出的具体实现
  */
-export function exportExcel(url, searchForm, options) {
+export function exportExcel(url, params, options) {
-    abstractExportExcel(url, searchForm, options, json2workbook, workbook2excel)
+    abstractExportExcel(url, params, options, json2workbook, workbook2excel)
 }
 
 export function workbook2excel(workbook, filename) {
@@ -42,9 +42,11 @@ export function workbook2excel(workbook, filename) {
 /**
  * 通过json数组生成workbook对象
  *
- * @param data         json数组
+ * @param data {array}                         json数组
- * @param columns      列配置
+ * @param columns {array}                      列配置
  * @param mergeOption                          合并配置项
+ *     @param mergeOption.primaryKey {string}  ./common.js #mergeExcel所需参数
+ *     @param mergeOption.orderKey {string}    ./common.js #mergeExcel所需参数
  * @return workbook                            exceljs的workbook对象
  */
 export function json2workbook(data, columns, mergeOption) {

vue/src/util/index.js

@@ -103,7 +103,7 @@ export function mergeObj(target, source) {
 /**
  * 日期格式化
  *
- * @param fmt {string} 格式，y(+..y)-年、M(+M)-月、d(+d)-天、H(+H)-时、m(+m)-分、s(+s)-秒、S-毫秒
+ * @param fmt {*|string}  格式，y(+..y)-年、M(+M)-月、d(+d)-天、H(+H)-时、m(+m)-分、s(+s)-秒、S-毫秒
  * @param date {Date}     可选，被格式化的日期
  * @return {string}       格式化后的日期字符串
  */
@@ -205,15 +205,16 @@ export function throttle(func, delay = 100) {
 
 /**
  * 循环等待成功事件
- * @param success 判断是否成功，true or false
+ *
- * @param callback 成功后的回调
+ * @param success {function}   返回true时说明成功
- * @param interval 循环间隔，毫秒
+ * @param callback {function}  成功后的回调
- * @param maxTryTime 最大循环次数，超出reject，小于1视为Infinity
+ * @param interval {number}    循环间隔，毫秒
+ * @param maxTryTime {number}  最大循环次数，超出reject，小于1视为Infinity
+ * @return {Promise}
  */
 export function waitUntilSuccess(success, callback, interval = 1000, maxTryTime = 0) {
     return new Promise((resolve, reject) => {
-        let fun,
+        let fun, count = 0
-            count = 0
 
         const check = () => {
             if (success()) {
@@ -221,9 +222,8 @@ export function waitUntilSuccess(success, callback, interval = 1000, maxTryTime
                 typeof callback === 'function' && callback()
                 return resolve()
             }
-            if (maxTryTime >= 1) {
+            if (maxTryTime >= 1 && ++count >= maxTryTime) {
-                count++
+                return reject()
-                if (count >= maxTryTime) return reject()
             }
         }
 

vue/src/util/math.js

@@ -1,39 +1,53 @@
 /*基于decimal.js的运算封装*/
 import Decimal from 'decimal.js'
 
+/**
+ * 依次相加
+ *
+ * @param val {number}
+ * @return {number}
+ */
 export function plus(...val) {
-    if (val.length === 0) return 0
+    const result = val.reduce((total, cur) => total.add(new Decimal(cur)), new Decimal(0))
-    else if (val.length === 1) return new Decimal(val[0]).toNumber()
+    return result.toNumber()
-    let f = new Decimal(val[0])
-    for (let i = 1; i < val.length; i++) {
-        f = f.add(new Decimal(val[i]))
-    }
-    return f.toNumber()
 }
 
+/**
+ * 依次相减
+ *
+ * @param val {number}
+ * @return {number}
+ */
 export function sub(...val) {
     if (val.length === 0) return 0
-    else if (val.length === 1) return new Decimal(val[0]).toNumber()
+
-    let f = new Decimal(val[0])
+    let result = new Decimal(val[0])
     for (let i = 1; i < val.length; i++) {
-        f = f.sub(new Decimal(val[i]))
+        result = result.sub(new Decimal(val[i]))
     }
-    return f.toNumber()
+    return result.toNumber()
 }
 
+/**
+ * 依次相乘
+ *
+ * @param val {number}
+ * @return {number}
+ */
 export function mul(...val) {
-    if (val.length === 0) return 0
+    const result = val.reduce((total, cur) => total.mul(new Decimal(cur)), new Decimal(1))
-    else if (val.length === 1) return new Decimal(val[0]).toNumber()
+    return result.toNumber()
-    let f = new Decimal(val[0])
-    for (let i = 1; i < val.length; i++) {
-        f = f.mul(new Decimal(val[i]))
-    }
-    return f.toNumber()
 }
 
+/**
+ * 依次相除
+ *
+ * @param val {number}
+ * @return {number}
+ */
 export function div(...val) {
     if (val.length === 0) return 0
-    else if (val.length === 1) return new Decimal(val[0]).toNumber()
+
     let f = new Decimal(val[0])
     for (let i = 1; i < val.length; i++) {
         f = f.div(new Decimal(val[i]))

vue/src/util/message.js

@@ -21,15 +21,17 @@ export function elAlert(msg, callback = () => ({})) {
     })
 }
 
-export function elConfirm(msg = '确认进行该操作？') {
+export function elConfirm(msg = '确认进行该操作？', ignoreReject = true) {
-    return new Promise(resolve => {
+    const promise = MessageBox.confirm(msg, {
-        MessageBox.confirm(msg, {
         type: 'warning',
         cancelButtonClass: 'is-plain'
     })
-            .then(() => resolve())
+
-            .catch(() => ({}))
+    if (ignoreReject) {
-    })
+        promise.catch(() => ({}))
+    }
+
+    return promise
 }
 
 export function elPrompt(msg) {

vue/src/util/route.js

@@ -21,8 +21,9 @@ export function refreshPage(route = router.currentRoute, replace = true) {
 
 /**
  * 关闭当前页，如果传入next则跳转到next页面
- * @param next 跳转的目标页面，作为第一个参数传入vue-router.replace
+ *
- * @return 仅在next有值时，返回vue-router.replace的结果
+ * @param next {string|route}   跳转的目标页面，作为第一个参数传入vue-router.replace
+ * @return {undefined|Promise}  仅在next有值时，返回vue-router.replace的结果
  */
 export function closeCurrentPage(next) {
     tagsViewMutations.delTagAndCache(router.currentRoute)

vue/src/util/storage.js

@@ -3,11 +3,14 @@ import {isEmpty} from "@/util"
 import {unzip, zip} from "@/util/secret"
 
 const {keyPrefix, zip: defaultUseZip} = storage
+const sessionUserKey = 'SESS-USER'
+const localPersonalSettingsKey = 'LOCAL-PERSONAL-SETTINGS'
+const sessionTagsViewKey = 'SESS-TAGS-VIEW'
 
 /**
  * 读取本地存储
  * @param key {string}        键名，自动加上统一前缀
- * @param storage             window.sessionStorage或window.localStorage
+ * @param storage {Storage}   window.sessionStorage或window.localStorage
  * @param useZip {boolean}    是否启用了压缩
  * @return {*|undefined}
  */
@@ -28,7 +31,7 @@ export function get(key, storage = window.sessionStorage, useZip = defaultUseZip
  * 写入本地存储
  * @param key {string}        键名，自动加上统一前缀
  * @param obj                 需要写入本地存储的js对象
- * @param storage             window.sessionStorage或window.localStorage
+ * @param storage {Storage}   window.sessionStorage或window.localStorage
  * @param useZip {boolean}    是否启用了压缩
  */
 export function set(key, obj, storage = window.sessionStorage, useZip = defaultUseZip) {
@@ -39,7 +42,7 @@ export function set(key, obj, storage = window.sessionStorage, useZip = defaultU
 /**
  * 判断本地存储中是否存在指定键名
  * @param key {string}       键名，自动加上统一前缀
- * @param storage         window.sessionStorage或window.localStorage
+ * @param storage {Storage}  window.sessionStorage或window.localStorage
  * @return {boolean}         存在则返回true
  */
 export function exist(key, storage = window.sessionStorage) {
@@ -49,16 +52,12 @@ export function exist(key, storage = window.sessionStorage) {
 /**
  * 根据指定键名，移除本地存储对应项
  * @param key {string}       键名，自动加上统一前缀
- * @param storage         window.sessionStorage或window.localStorage
+ * @param storage {Storage}  window.sessionStorage或window.localStorage
  */
 export function remove(key, storage = window.sessionStorage) {
     storage.removeItem(`${keyPrefix}${key}`)
 }
 
-const sessionUserKey = 'SESS-USER'
-const localPersonalSettingsKey = 'LOCAL-PERSONAL-SETTINGS'
-const sessionTagsViewKey = 'SESS-TAGS-VIEW'
-
 /**
  * 获取用户信息，获取失败时会清除用户信息并返回一个空对象
  *

vue/src/util/tree.js

@@ -2,19 +2,10 @@ import {deepClone} from "@/util"
 import {createWorker} from '@/util/worker'
 
 const DEFAULT_PROPS = {
-    //节点的id属性名称
     id: 'id',
-
-    //节点的父级id属性名称
     pid: 'pid',
-
-    //节点的子级节点属性名称
     children: 'children',
-
-    //根节点的判定方法，传入函数时参数为节点对象
     rootPredicate: 0,
-
-    //叶子节点是否能有children属性
     leafHasChildren: false
 }
 
@@ -22,7 +13,12 @@ const DEFAULT_PROPS = {
  * 列表转树形结构
  *
  * @param list {array}
- * @param props 树的配置项，{id, pid, children, rootPredicate, leafHasChildren}
+ * @param props 树的配置项
+ *     @param props.id {string} 节点的id属性名称
+ *     @param props.pid {string} 节点的父级id属性名称
+ *     @param props.children {string} 节点的子级节点属性名称
+ *     @param props.rootPredicate {*|function} 根节点的判定方法，传入函数时参数为节点对象
+ *     @param props.leafHasChildren {boolean} 叶子节点是否能有children属性
  * @return {array}
  */
 export function createTree(list, props = {}) {

vue/src/util/validate.js

@@ -1,12 +1,3 @@
-export function isExternal(path) {
-    return /^(https?:|mailto:|tel:)/.test(path)
-}
-
-export function validEmail(email) {
-    const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
-    return reg.test(email)
-}
-
 export function isString(str) {
     return typeof str === 'string' || str instanceof String
 }
@@ -16,6 +7,15 @@ export function isInteger(v) {
     return t.toString() !== 'NaN' && t < 2147483647 && t > -2147483648
 }
 
+export function isExternal(path) {
+    return /^(https?:|mailto:|tel:)/.test(path)
+}
+
+export function isEmail(email) {
+    const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+    return reg.test(email)
+}
+
 export function isImage(suffix) {
     const reg = /\.(png|jpg|gif|jpeg|webp|bmp)$/
     return reg.test(suffix.toLowerCase())

vue/src/view/admin/purchase/inbound/detailPage.vue

@@ -162,7 +162,7 @@ export default {
                 if (isEmpty(sub.num)) {
                     return `第${index}个商品数量不能为空`
                 }
-                if (sub.num < 0 || !isInteger(sub.num)) {
+                if (!isInteger(sub.num) || sub.num < 0) {
                     return `第${index}个商品数量有误`
                 }
 

vue/src/view/admin/purchase/order/detailPage.vue

@@ -220,10 +220,10 @@ export default {
                 if (isEmpty(sub.price)) {
                     return `第${index + 1}个商品单价不能为空`
                 }
-                if (sub.num < 0 || !isInteger(sub.num)) {
+                if (!isInteger(sub.num) || sub.num < 0) {
                     return `第${index}个商品数量有误`
                 }
-                if (sub.price <= 0 || !isInteger(sub.price)) {
+                if (!isInteger(sub.price) || sub.price <= 0) {
                     return `第${index}个商品单价有误`
                 }
                 this.form.total = plus(this.form.total, mul(sub.num, sub.price))

vue/src/view/admin/sell/order/detailPage.vue

@@ -203,8 +203,8 @@ export default {
                 if (isEmpty(sub.cid, sub.cname)) return `第${index}个商品分类不能为空`
                 if (isEmpty(sub.num)) return `第${index}个商品数量不能为空`
                 if (isEmpty(sub.price)) return `第${index + 1}个商品单价不能为空`
-                if (sub.num < 0 || !isInteger(sub.num)) return `第${index}个商品数量有误`
+                if (!isInteger(sub.num) || sub.num < 0) return `第${index}个商品数量有误`
-                if (sub.price <= 0 || !isInteger(sub.price)) return `第${index}个商品单价有误`
+                if (!isInteger(sub.price) || sub.price <= 0) return `第${index}个商品单价有误`
                 this.form.total = plus(this.form.total, mul(sub.num, sub.price))
                 index++
             }

vue/src/view/admin/sell/outbound/detailPage.vue

@@ -263,7 +263,7 @@ export default {
             let index = 1
             for (let sub of this.form.data) {
                 if (isEmpty(sub.num)) return `第${index}个商品的出库数量不能为空`
-                if (sub.num < 0 || !isInteger(sub.num)) return `第${index}个商品的出库数量有误`
+                if (!isInteger(sub.num) || sub.num < 0) return `第${index}个商品的出库数量有误`
                 index++
             }
 

vue/src/view/example/globalMethod/guidePage.vue

@@ -17,6 +17,8 @@
 </template>
 
 <script>
+import {elSuccess, elConfirm} from "@/util/message"
+
 export default {
     name: "guidePage",
 
@@ -26,19 +28,17 @@ export default {
                 {
                     element: '#example-guide-step1',
                     content: 'onNext钩子示例',
-                    onNext: () => this.$confirm('确认进行下一步吗？')
+                    onNext: () => elConfirm('确认进行下一步吗？', false)
                 },
                 {
                     element: '#example-guide-step2',
                     content: 'onPrevious钩子展示',
-                    onPrevious: () => this.$confirm('确认回到上一步吗？')
+                    onPrevious: () => elConfirm('确认回到上一步吗？', false)
                 },
                 {
                     element: '#example-guide-step3',
                     content: 'onHighlighted钩子示例',
-                    onHighlighted() {
+                    onHighlighted: () => elSuccess('到达第三步！')
-                        this.$message.info('到达第三步！')
-                    }
                 },
                 {
                     element: '#example-guide-step4',

vue/src/view/example/test/develop/component/ImageCompressTest.vue

@@ -9,12 +9,12 @@
                     <el-button type="primary" @click="() => $refs.jpg.click()">选择图片</el-button>
                 </div>
                 <div v-show="jpg.input.src" class="image-container">
-                    <p>原始图片：{{ jpg.name }} ({{ jpg.input.size|numberFormatter }})</p>
+                    <p>原始图片：{{ jpg.name }} ({{ jpg.input.size|number2StorageUnit }})</p>
                     <img :src="jpg.input.src">
                 </div>
                 <div v-show="jpg.output.src" class="image-container">
                     <p>
-                        压缩后大小：({{ jpg.output.size|numberFormatter }})，
+                        压缩后大小：({{ jpg.output.size|number2StorageUnit }})，
                         压缩率：{{ jpg.compress }}%，
                         总耗时：{{ jpg.totalCost }}毫秒，
                         计算耗时：{{ jpg.calcCost }}毫秒
@@ -41,12 +41,12 @@
                     <el-button type="primary" @click="() => $refs.png.click()">选择图片</el-button>
                 </div>
                 <div v-show="png.input.src" class="image-container">
-                    <p>原始图片：{{ png.name }} ({{ png.input.size|numberFormatter }})</p>
+                    <p>原始图片：{{ png.name }} ({{ png.input.size|number2StorageUnit }})</p>
                     <img :src="png.input.src">
                 </div>
                 <div v-show="png.output.src" class="image-container">
                     <p>
-                        压缩后大小：({{ png.output.size|numberFormatter }})，
+                        压缩后大小：({{ png.output.size|number2StorageUnit }})，
                         压缩率：{{ png.compress }}%，
                         总耗时：{{ png.totalCost }}毫秒，
                         计算耗时：{{ png.calcCost }}毫秒