vue&&react项目更好实践

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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();
},

以上是 vue&&react项目更好实践 的全部内容， 来源链接： utcz.com/z/380126.html

回到顶部