vue&&react項目更好實踐

react項目開發記錄

1.antd RangePicker 設定目前一年的選擇時間

<RangePicker
  style={{ width: "100%" }}
  value={[this.state.startValue,this.state.endValue]}
  onChange={this.handlePickerchange}
  disabledDate={this.handleDisabledDate}
  format="YYYY-MM-DD"
 />
  // 選擇目前年
  handleDisabledDate = (time) => {
    const timeYear = time.get('year');  // 目前年
    // console.log(timeYear,'timeYear')
    const currentYear = moment().format('YYYY'); //今年
    // console.log(currentYear,'currentYear')
    return timeYear != currentYear;
  }      

2.國際化方案（react-intl-universal）

npm i react-intl-universal -S

import intl from 'react-intl-universal'

import { FormattedMessage} from 'react-intl';
intl.get('xx key').d('預設語言')
<FormattedMessage id='xxx key' defaultMessage="預設語言"/>      

vue項目開發記錄

1.國際化注入全局使用

// 初始化加載語言包
const i18n = new VueI18n({
    locale: xxx語言辨別, 
    messages: require('./language/index'), // 語言包
})

// 國際化語言包方法注入window下(友善外部用)      

2.Map資料類型轉成數組下拉格式

// 将 map 資料轉換為 Select元件 數組 不需要 all 傳 false
const transformData = (mapData, isAll = true) => {
    const all = isAll ? [{ label: window.i18nGlobal.t('xxxkey') || 'all', key: '' }] : []
    const selectData = Object.keys(mapData).map(item => {
        return { label: mapData[item], key: item }
    })
    return all.concat(selectData)
}
export const testMap = {
    '0': window.i18nGlobal.t('xxxkey') || '預設值',
    '1': window.i18nGlobal.t('xxxkey') || '預設值',
}

export const testMapArry = transformData(testMap, false)      

3.禁止軟鍵盤彈出（h5）

// vant 輸入框
<van-field
    v-model="value"
    name="xxx"
    :right-icon="自定義圖示"
    @focus="forbidKeyBoard"
/>

// 禁止軟鍵盤彈出
forbidKeyBoard(){
    document.activeElement.blur();
},