需求分析

分析：
我們通常會(huì)遇到這種情況，當(dāng)我們制作一個(gè)表單頁(yè)面的時(shí)候，通常會(huì)有添加和編輯的情況，我們?cè)谔峤坏臅r(shí)候還需要將時(shí)間的格式轉(zhuǎn)換為字符串格式進(jìn)行傳參。

在這里我們使用的是 iview 中的 DatePicker type格式為datetime可選擇日期和時(shí)間

添加頁(yè)面

在添加頁(yè)面中相對(duì)簡(jiǎn)單很多 因?yàn)椴寮哂?@on-change 時(shí)間 時(shí)間的參數(shù)就是當(dāng)前選中的時(shí)間字符串格式的 所以我們只需要在這個(gè)事件中賦值即可

首先我們進(jìn)行了雙向綁定 然后綁定事件

在事件中我們只需要將time參數(shù)傳遞給對(duì)應(yīng)變量即可 下圖查看效果

當(dāng)我們選擇對(duì)應(yīng)時(shí)間的時(shí)候輸出的time為字符串格式的時(shí)間 所以我們的賦值也搞定了
下面來看一個(gè)麻煩的編輯頁(yè)面

編輯頁(yè)面

上面的添加頁(yè)面很簡(jiǎn)單 我們只需要通過 change 事件進(jìn)行賦值即可 但是在編輯頁(yè)面中 我們跳轉(zhuǎn)到編輯頁(yè)面然后獲取詳情 并綁定到時(shí)間插件上面 這時(shí)候我們不對(duì)時(shí)間進(jìn)行選擇 也就不觸發(fā)change事件了 所以當(dāng)我們提交的時(shí)候看一下輸出

通過獲取詳情已經(jīng)復(fù)制給了日期插件 并沒有觸發(fā)change事件 我們點(diǎn)擊確定按鈕輸出的是實(shí)踐對(duì)象 但是如果用戶進(jìn)來更改了時(shí)間 進(jìn)而觸發(fā)change事件后 時(shí)間格式又成為了字符串 所以我們?cè)俅涡枰袛嗍欠駷樽址愋偷母袷皆谶x擇性的進(jìn)行格式化

推薦以下

export function parseTime(time, cFormat) {if (arguments.length === 0) {return null}const format = cFormat || '{y}-{m}-ze8trgl8bvbq {h}:{i}:{s}'let dateif (typeof time === 'object') {date = time} else {if (('' + time).length === 10) time = parseInt(time) * 1000date = 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]if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]if (result.length > 0 && value < 10) {value = '0' + value}return value || 0})return time_str}

• 首先我們引入到使用組件中
  
• 如果要轉(zhuǎn)化的值不為空則進(jìn)行格式化
  
  在這里我們不用考慮當(dāng)前時(shí)間的格式 當(dāng)前用戶有沒有選擇時(shí)間 因?yàn)樵谏厦娴膒arseTime方法中我們進(jìn)行了判斷
  
  這樣就可以了

總結(jié)

以上是生活随笔為你收集整理的看完就懂的编辑页面如何巧妙处理时间的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。