前端經常使用簡單的一堆小東西整理

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~~~~