2. 程式人生 > 其它 >vue專案封裝的簡易方法

vue專案封裝的簡易方法

阿新 • • 發佈：2022-05-30 
// 日期格式化
export function parseTime(time: string, pattern: string) {
  if (arguments.length === 0 || !time) {
    return null
  }
  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
      time 
 
= parseInt(time)
    } else if (typeof time === 'string') {
      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
    }
    if ((typeof time === 'number') && (time.toString().length === 10)) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj 
 
= {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
 

    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
    if (result.length > 0 && value < 10) {
      value = '0' + value
    }
    return value || 0
  })
  return time_str
}

/**
 * 去除 陣列中的空字串
*/
export function trimSpace(array: any) {
  for (var i = 0; i < array.length; i++) {
    if (array[i] == " " || array[i] == "" || array[i] == null || typeof (array[i]) == "undefined") {
      array.splice(i, 1);
      i = i - 1;
    }
  }
  return array;
}

/**
* 資料非空驗證
* @desc 驗證資料是否為 null undefined [] {} ''
* @param data
* @return {boolean}
*/
export function isEmpty(data: any) {
  if (data === null) return true
  if (data === undefined) return true
  if (Object.prototype.toString.call(data) === '[object Array]') return data.length === 0
  if (Object.prototype.toString.call(data) === '[object Object]') return Object.keys(data).length === 0
  if (typeof data === 'string') return data.trim() === ''
  return false
}

/**
 * 過濾空欄位
 */
export const getNewParmes = (parme: any, ignoreArr: Array<any>) => {
  let parmes = parme
  let tempValue = { ...parme }
  if (parmes) {
    let keys = Object.keys(parmes);
    for (let i = 0; i < keys.length; i++) {
      const key = keys[i];
      if (!ignoreArr.includes(key)) {
        const value = parmes[key];
        if (isEmpty(value)) {
          delete parmes[key];
        }
      }
    }
  }
  tempValue = { ...parmes }
  if (isEmpty(tempValue)) {
    tempValue = {}
  }
  return tempValue;
}

/**
 * js計算中的科學計數法
*/
export const toolNumber = (num_str: any) => {
  num_str = num_str.toString();
  if (num_str.indexOf("+") != -1) {
    num_str = num_str.replace("+", "");
  }
  if (num_str.indexOf("E") != -1 || num_str.indexOf("e") != -1) {
    var resValue = "",
      power: number = 0,
      result = null,
      dotIndex = 0,
      resArr: any = [],
      sym = "";
    var numStr = num_str.toString();
    if (numStr[0] == "-") {
      // 如果為負數，轉成正數處理，先去掉‘-’號，並儲存‘-’.
      numStr = numStr.substr(1);
      sym = "-";
    }
    if (numStr.indexOf("E") != -1 || numStr.indexOf("e") != -1) {
      var regExp = new RegExp(
        "^(((\\d+.?\\d+)|(\\d+))[Ee]{1}((-(\\d+))|(\\d+)))$",
        "ig"
      );
      result = regExp.exec(numStr);
      if (result != null) {
        resValue = result[2];
        power = Number(result[5]);
        result = null;
      }
      if (!resValue && !power) {
        return false;
      }
      dotIndex = resValue.indexOf(".") == -1 ? 0 : resValue.indexOf(".");
      resValue = resValue.replace(".", "");
      resArr = resValue.split("");
      if (Number(power) >= 0) {
        var subres = resValue.substr(dotIndex);
        power = Number(power);
        //冪數大於小數點後面的數字位數時，後面加0
        for (var i = 0; i <= power - subres.length; i++) {
          resArr.push("0");
        }
        if (power - subres.length < 0) {
          resArr.splice(dotIndex + power, 0, ".");
        }
      } else {
        power = power.replace("-", "");
        power = Number(power);
        //冪數大於等於 小數點的index位置, 前面加0
        for (var i = 0; i < power - dotIndex; i++) {
          resArr.unshift("0");
        }
        var n = power - dotIndex >= 0 ? 1 : -(power - dotIndex);
        resArr.splice(n, 0, ".");
      }
    }
    resValue = resArr.join("");

    return sym + resValue;
  } else {
    return num_str;
  }
}

/**
 * 拼接 圖片 URL  
 */
export const getNewUrl = (url: string, width: number | string = 100, height: number | string = 100, sku: string = 'nihao') => {
  let oldUrl = `${url}`;
  let newUrl = '';
  if (!isEmpty(url)) {
    if (url.indexOf("img.nihaojewelry.com") !== -1) {
      let iconArr = url.split('.');
      newUrl = `${oldUrl.replace(`.${iconArr[iconArr.length - 1]}`, `_thumb_${width}x${height}/${sku}.${iconArr[iconArr.length - 1]}`)}`;
    } else {
      newUrl = `${oldUrl}?x-oss-process=image/format,webp,image/resize,m_fill,w_${width},h_${height}`;
    }
  }
  return newUrl;

  // skuImg: "http://image.nihaostyles.com/product/2021/6/10/1402800346123866112.jpg?x-oss-process=image/resize,m_fixed,limit_0,h_120,w_120"
  // skuImg: "http://image.nihaostyles.com/product/2021/6/10/1402800346123866112.jpg"
  // 主站 圖片URL import { getNewUrl } from '/@/utils/erp';
  // https://img.nihaojewelry.com/product/2022/4/13/1514075147882074112_thumb_200x200/NHMEY713729.jpg
  // https://img.nihaojewelry.com/product/2022/4/13/1514075147882074112.jpg
  // 一種型別
  // https://img.nihaojewelry.com/
  // 其他型別
  // https://image.nihaostyles.com/
  // https://hz-oss-ck.oss-cn-hangzhou.aliyuncs.com/
  // = = = = = =
  // let newUrl = `${item.skuImg.replace(`.${iconArr[iconArr.length - 1]}`, `_thumb_${130}x${130}/${item.sku}.${iconArr[iconArr.length - 1]}`)}`;
  // = = = = = 
  // http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,m_fixed,limit_0,h_4096,w_4096
  // https://cc-west-usa.oss-us-west-1.aliyuncs.com/4cf4abeb-1519-4f27-adec-328bd95fc176.jpg?x-oss-process=image/format,webp,image/resize,m_fill,w_179,h_190

}
// 日期格式化 export function parseTime(time: string, pattern: string) {   if (arguments.length === 0 || !time) {     return null   }   const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'   let date   if (typeof time === 'object') {     date = time   } else {     if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {       time = parseInt(time)     } else if (typeof time === 'string') {       time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');     }     if ((typeof time === 'number') && (time.toString().length === 10)) {       time = time * 1000     }     date = new Date(time)   }   const formatObj = {     y: date.getFullYear(),     m: date.getMonth() + 1,     d: date.getDate(),     h: date.getHours(),     i: date.getMinutes(),     s: date.getSeconds(),     a: date.getDay()   }   const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {     let value = formatObj[key]     // Note: getDay() returns 0 on Sunday     if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }     if (result.length > 0 && value < 10) {       value = '0' + value     }     return value || 0   })   return time_str }
/**  * 去除 陣列中的空字串 */ export function trimSpace(array: any) {   for (var i = 0; i < array.length; i++) {     if (array[i] == " " || array[i] == "" || array[i] == null || typeof (array[i]) == "undefined") {       array.splice(i, 1);       i = i - 1;     }   }   return array; }
/** * 資料非空驗證 * @desc 驗證資料是否為 null undefined [] {} '' * @paramdata * @return{boolean} */ export function isEmpty(data: any) {   if (data === null) return true   if (data === undefined) return true   if (Object.prototype.toString.call(data) === '[object Array]') return data.length === 0   if (Object.prototype.toString.call(data) === '[object Object]') return Object.keys(data).length === 0   if (typeof data === 'string') return data.trim() === ''   return false }
/**  * 過濾空欄位  */ export const getNewParmes = (parme: any, ignoreArr: Array<any>) => {   let parmes = parme   let tempValue = { ...parme }   if (parmes) {     let keys = Object.keys(parmes);     for (let i = 0; i < keys.length; i++) {       const key = keys[i];       if (!ignoreArr.includes(key)) {         const value = parmes[key];         if (isEmpty(value)) {           delete parmes[key];         }       }     }   }   tempValue = { ...parmes }   if (isEmpty(tempValue)) {     tempValue = {}   }   return tempValue; }
/**  * js計算中的科學計數法 */ export const toolNumber = (num_str: any) => {   num_str = num_str.toString();   if (num_str.indexOf("+") != -1) {     num_str = num_str.replace("+", "");   }   if (num_str.indexOf("E") != -1 || num_str.indexOf("e") != -1) {     var resValue = "",       power: number = 0,       result = null,       dotIndex = 0,       resArr: any = [],       sym = "";     var numStr = num_str.toString();     if (numStr[0] == "-") {       // 如果為負數，轉成正數處理，先去掉‘-’號，並儲存‘-’.       numStr = numStr.substr(1);       sym = "-";     }     if (numStr.indexOf("E") != -1 || numStr.indexOf("e") != -1) {       var regExp = new RegExp(         "^(((\\d+.?\\d+)|(\\d+))[Ee]{1}((-(\\d+))|(\\d+)))$",         "ig"       );       result = regExp.exec(numStr);       if (result != null) {         resValue = result[2];         power = Number(result[5]);         result = null;       }       if (!resValue && !power) {         return false;       }       dotIndex = resValue.indexOf(".") == -1 ? 0 : resValue.indexOf(".");       resValue = resValue.replace(".", "");       resArr = resValue.split("");       if (Number(power) >= 0) {         var subres = resValue.substr(dotIndex);         power = Number(power);         //冪數大於小數點後面的數字位數時，後面加0         for (var i = 0; i <= power - subres.length; i++) {           resArr.push("0");         }         if (power - subres.length < 0) {           resArr.splice(dotIndex + power, 0, ".");         }       } else {         power = power.replace("-", "");         power = Number(power);         //冪數大於等於 小數點的index位置, 前面加0         for (var i = 0; i < power - dotIndex; i++) {           resArr.unshift("0");         }         var n = power - dotIndex >= 0 ? 1 : -(power - dotIndex);         resArr.splice(n, 0, ".");       }     }     resValue = resArr.join("");
    return sym + resValue;   } else {     return num_str;   } }
/**  * 拼接 圖片 URL    */ export const getNewUrl = (url: string, width: number | string = 100, height: number | string = 100, sku: string = 'nihao') => {   let oldUrl = `${url}`;   let newUrl = '';   if (!isEmpty(url)) {     if (url.indexOf("img.nihaojewelry.com") !== -1) {       let iconArr = url.split('.');       newUrl = `${oldUrl.replace(`.${iconArr[iconArr.length - 1]}`, `_thumb_${width}x${height}/${sku}.${iconArr[iconArr.length - 1]}`)}`;     } else {       newUrl = `${oldUrl}?x-oss-process=image/format,webp,image/resize,m_fill,w_${width},h_${height}`;     }   }   return newUrl;
  // skuImg: "http://image.nihaostyles.com/product/2021/6/10/1402800346123866112.jpg?x-oss-process=image/resize,m_fixed,limit_0,h_120,w_120"   // skuImg: "http://image.nihaostyles.com/product/2021/6/10/1402800346123866112.jpg"   // 主站 圖片URL import { getNewUrl } from '/@/utils/erp';   // https://img.nihaojewelry.com/product/2022/4/13/1514075147882074112_thumb_200x200/NHMEY713729.jpg   // https://img.nihaojewelry.com/product/2022/4/13/1514075147882074112.jpg   // 一種型別   // https://img.nihaojewelry.com/   // 其他型別   // https://image.nihaostyles.com/   // https://hz-oss-ck.oss-cn-hangzhou.aliyuncs.com/   // = = = = = =   // let newUrl = `${item.skuImg.replace(`.${iconArr[iconArr.length - 1]}`, `_thumb_${130}x${130}/${item.sku}.${iconArr[iconArr.length - 1]}`)}`;   // = = = = =   // http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,m_fixed,limit_0,h_4096,w_4096   // https://cc-west-usa.oss-us-west-1.aliyuncs.com/4cf4abeb-1519-4f27-adec-328bd95fc176.jpg?x-oss-process=image/format,webp,image/resize,m_fill,w_179,h_190
}

相關推薦

vue專案封裝的簡易方法

// 日期格式化 export function parseTime(time: string, pattern: string) { if (arguments.length === 0 || !time) {

Vue-cli3生成的Vue專案載入Mxgraph方法示例

使用Vue-cli3生成Vue專案，並等待專案建立成功。 vue create [專案名] 安裝mxgraph。 cnpm install mxgraph --save

vue專案封裝api介面

1. 服務端地址：http://xxx.xxx.xxx.xxx:8088 2. 本地專案地址：http://192.168.229.44:1234/demo/#/

vue專案封裝axios

技術標籤：前端axiosvue 1 官網安裝依賴 npm install axios npm install --save axios vue-axios 2 在main.js中引入

在 Vue 中封裝公用方法

技術標籤：vuejavascriptvue.jses6 我們在專案中常常需要對一些請求引數做處理，例如給所有請求的關鍵引數去除首尾空格，所有空格，等等，但是我們如果一個個去監聽元件變化無疑是非常耗費精力的，所以我們需要封

vue專案封裝請求

技術標籤：筆記 對於程式碼中的請求操作 介面請求可能需要重用 實際工作中，介面非常容易變動, 改起來很麻煩！

vue 專案封裝 axios 的 HTTP 請求

技術標籤：vuevue封裝axios超時退出http請求 在介紹如何封裝 axios 的 http 請求之前，我們先來了解下什麼是 axios。

Vue之 封裝toFixed方法（解決精度丟失問題）

1.在main.js中寫入如下程式碼 // 重新寫入 toFixed 方法 Number.prototype.toFixed = function (n) {

Vue專案 封裝Element-ui中的el-pagination作為公用分頁元件

原因：分頁在專案當中使用非常頻繁，因此就將el-pagination封裝為了一個全域性元件

vue專案中進行svg元件封裝及配置方法步驟

最近剛入新的公司，拿到專案之後，發現一個有趣的事情就是標題的icon是用svg來弄的，這篇文章徹底弄清楚怎麼使用

vue專案中使用eslint+prettier規範與檢查程式碼的方法

1.前言   在團隊協作中，為避免低階 Bug、以及團隊協作時不同程式碼風格對彼此造成的困擾與影響，會預先制定編碼規範。使用 Lint 工具和程式碼風格檢測工具，則可以輔助編碼規範執行，有效控制程式碼質量

如何在vue專案中嵌入jsp頁面的方法(2種)

今日一個專案中一塊功能模組是其他系統使用jsp已經開發好的頁面，想著直接將其嵌入到當前的vue專案中節約開發成本；但是發現並非想象的那麼簡單

pycharm新建Vue專案的方法步驟(圖文)

1.首先安裝Node.js 官網：https://nodejs.org/zh-cn/ 1）根據自己電腦型號下載好 2）點選安裝，傻瓜式一步一步最後完成安裝

vue專案中使用vue-layer彈框外掛的方法

vue-layer彈框外掛 安裝 npm i --save vue-layer 引用 import layer from \'vue-layer\' Vue.prototype.$layer = layer(Vue);

Vue專案中使用flow做型別檢測的方法

在vue2.0的專案中加入flow型別檢查。當前專案是用js寫的，當專案越來越大，由於js弱型別的特性，相比ts(typescript)這種強型別的語言而言，後期維護會越來越困難。為了解決這個問題，決定使用flow 加入型別檢查。

Vue專案vscode 安裝eslint外掛的方法(程式碼自動修復)

ESlint：是用來統一JavaScript程式碼風格的工具，不包含css、html等。 方法和步驟：

VSCode寫vue專案一鍵生成.vue模版,修改定義其他模板的方法

1. 安裝一個外掛，識別vue檔案 2.新建程式碼片段 檔案–>首選項–>使用者程式碼片段–>點選新建程式碼片段–取名vue.json 確定

vue專案啟動出現cannot GET /服務錯誤的解決方法

上午做了專案，中午吃完飯後回來再跑一次伺服器， 出現 Cannot GET/： 控制檯中並沒有報錯；npm run dev命令列視窗也沒有報錯。

VSCode搭建Vue專案的方法

在vscode上搭建一個vue專案---初學總結。 1.假設Vscode、nodejs等已經安裝好了。 2.全域性安裝vue-cli，vue-cli可以幫助我們快速構建Vue專案。

vue專案中使用bpmn為節點新增顏色的方法

內容概述 bpmn是比較方便的繪製流程圖的外掛，官方demo https://github.com/bpmn-io/bpmn-js-examples