前端常用简单的一堆小东西整理

1:搜索框内容删除空格

.replace(/\s+/g, '')

2:字段处理为数字类型:

Number()

3:加小数点两位:

.toFixed(2)

4:字段处理为字符类型:

String()

5:字段处理为数组类型:

Array()

6:input输入框限制只能输入10个数字的总长度:

maxLength={10}

7:获取form表单里面输入的所有内容

let valueInput = this.props.form.getFieldsValue();
valueInput就是所有输入框的值.



this.props.form.validateFieldsAndScroll((err, values) => {
    if(!err){
        在这里做处理.要避开错误.
    }
)}

8:获取input输入框刚点击的时候拿到的值

onChange={e =>this.onChange(e)}

9:获取input输入框失去焦点的时候拿到的值

onBlur={e =>this.onBlur(e)}

10:字体加粗

fontWeight: 300

11:溢出隐藏

overflow: hidden;

12:省略号

text-overflow:ellipsis;

13:文本不换行

white-space: nowrap;

14:底部边框

border-bottom: 1px solid #e8e8e8;

15:点击遮幕层关闭弹出窗口

maskClosable:true

16:修改登录成功后进入的页面

思路:找到点击登录的方法,查看方法发的请求.在发请求的里面去看成功后跳转至哪里了,如果没有就去model层看,可能在model层的callback里面处理了.

// 点击登录的方法
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        if (this.state.isRemember === true) {
          setCookie('userName', values.username, 7)
          setCookie('password', values.password, 7)
          this.setState({
            initialStateAutoL: true
          })
        }
        let datas = {
          captcha: values.captcha,
          password: values.password,
          userName: values.username,
          uuid: this.props.login.captchaToken,
        };
        this.props.dispatch({
          type: `login/goLogin`,
          payload: datas,
        });
      }
    });
  };
  
  model层:
  // 登录
    *goLogin({ payload }, { call }) {
      const ret = yield call(login, payload);
      const { code, data } = ret;
      if (code === '0000') {
        if (data.token) {
          localStorage.setItem('token', data.token);
        } 
        // 在这里跳转的
        router.push({pathname:'/home'});
      }
    },

17:form表单initialValue踩坑!!!

设置initialValue的时候,如果是空字符串,或者null.设置placeholder都不会生效!!! 一定要设置成undefined!!!! 只有是undefined的时候,placeholder才会生效!!!!

可以这样写:initialValue: repCode || undefined,这样写的意思就是,不论repCode是空字符串还是null还是 undefined,都会取undefined.

18:js 0.1+0.2 = 0.3000000000004

原理2-52位精确
解决方法:值先除以100再乘以100.

19:后端返回前端时间,截取年月日

data.substring(0,10)
data代表需要截取的字段,0代表从第一位开始,10代表截取的最后位置.

20:antd table列表 单选行增加左边边框

table的rowClassName属性就是给选中的行增加样式的. 返回值是string. 
括号里的两个参数:record:列表的参数,index:下标
styles.active就是less文件里的样式名.
我用过了record.id也用过index,我都贴出来:

rowClassName={(record,index)=>{
              let className;
              if(String(this.state.list) === record.id){
                className = styles.active
              }
              return className;
            }}

rowClassName={(record,index)=>{
                let className;
                if(Number(this.state.val) === (index+1)){
                  className = styles.active
                }
                return className;
              }}
              
如果是list列表增加的话可以用为伪类方便一些.

21:github退出全屏

F11

22:vscode打开文件显示中文乱码

文件->首选项->设置 ->搜索  files.autoGuessEncoding 不保持选中状态

23:页面剩余高度计算

height:calc(100vh - 330px)
calc():计算工具
100vh:屏幕高度

24:Flex布局下文字被覆盖的问题

特别是移动端,经常会遇到Flex布局下文字被覆盖.但是设置很多属性值都么有用. 直到最后发现.是父元素的高度影响了子元素.

25:关于NaN.

    NaN,如何产生?
    NaN === NaN ?
    NaN是数字类型的，全称为:Not a Number .但是它又可以用isNaN()检测，isNaN() 函数用于检查其参数是否是非数字值

25:页面动画提示语.

console.log('%c\ud83d\uDCA1 返回错误 ', 'background:#000;color:#f0f360',11111111111111);

console.log('%c\ud83d\uDC4C 请求成功 ', 'background:#000;color:#a9ef87', response);

console.log(
        `%c\ud83d\uDE80 reuqest ${config.method} `,
        'background:#000;color:#b1dcff',
        config.url,
      );

console.log('%c\ud83d\uDD25 请求失败 ', 'background:#000;color:#f0f360',11111111111111);

26:颜色透明度属性设置.

opacity: 0.3~~~~