vue&&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下(方便外部用)
window.i18nGlobal = i18n
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();
},