vue&&react项目更好实践

1|0react项目开发记录

1|01.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;
  }

1|02.国际化方案（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="默认语言"/>

2|0vue项目开发记录

1|01.国际化注入全局使用

// 初始化加载语言包
const i18n = new VueI18n({
    locale: xxx语言标识, 
    messages: require('./language/index'), // 语言包
})
​
// 国际化语言包方法注入window下(方便外部用)
window.i18nGlobal = i18n

1|02.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)

1|03.禁止软键盘弹出（h5）

// vant 输入框
<van-field
    v-model="value"
    name="xxx"
    :right-icon="自定义图标"
    @focus="forbidKeyBoard"
/>
​
// 禁止软键盘弹出
forbidKeyBoard(){
    document.activeElement.blur();
},

 

__EOF__

本文作者：蓝色帅-橙子哥
本文链接：https://www.cnblogs.com/lhl66/p/15357664.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！