前端项目一些细节总结

1. react中使用ref，来控制指定的元素的事件

• 需求是点击卡片之后弹起输入框，而不只是点击input

import React, {useRef} from 'react'
import style from './style.module.css'

interface IScrollCardSecond {
  nameFn: Function,
  name: string
}

const handleChange = (ev: any, nameFn: Function) => {
  const val = ev.target.value
  // 子组件中
  nameFn(val)
}

export default function ScrollCardSecond(props: IScrollCardSecond) {

  const {nameFn, name} = props
  const nameRef:any = useRef(null)

  return (
    // 这里要注意样式要写宽和高
    <div className={style['scroll-card-second']} 
      onClick={()=>nameRef.current.focus()}>
      <h3 className={style['title']}>我的签名</h3>
      <section className={style['signature']}>
        {/* 静心课堂 */}
        <input type="text" 
          placeholder={'点击签名'}
          style={{textAlign: "center"}}
          className={style['input']}
          ref={nameRef} 
          value={name}
          onChange={(ev: any) => handleChange(ev, nameFn)}
        />
      </section>
      <section className={style['one-px']}></section>
    </div>
  )
}

首先

const nameRef:any = useRef(null)

<input type="text" 
  placeholder={'点击签名'}
  style={{textAlign: "center"}}
  className={style['input']}
  ref={nameRef} 
  value={name}
  onChange={(ev: any) => handleChange(ev, nameFn)}
/>

然后

<div className={style['scroll-card-second']} 
  onClick={()=>nameRef.current.focus()}></div>

2. 父组件使用传函数来获取子组件的值

// 父组件中
<ScrollCardSecond nameFn={nameFn} name={name}></ScrollCardSecond>

手机移动端触屏版web网页禁止复制、选中文本的方法

div {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}

3. 严重的问题————Boolean(对象)结果为true

Boolean([]) //true

4. 1px问题

因为手机端涉及到1px的地方太多了，所以我就把它封装成组件，这是个纯UI组件

各个方向的1px的实现：

 <div class="main">
    <span class="one-pixl one-pixl-top"></span>
    <span class="one-pixl one-pixl-right"></span>
    <span class="one-pixl one-pixl-bottom"></span>
    <span class="one-pixl one-pixl-left"></span>
  </div>

  .main {
     100%;
    padding: 52px 29px;
    display: flex;
    justify-content: center;
  }
  .one-pixl {
    position: relative;
  }
  .one-pixl::after {
    position: absolute;
    content: '';
    box-shadow: 0 0 0 1px deeppink;
  }
  @media (min-resolution:2dppx) {
    .one-pixl::after {
      box-shadow: 0 0 0 .5px;
    }
  }
  @media (min-resolution:3dppx) {
    .one-pixl::after {
      box-shadow: 0 0 0 .3333px;
    }
  }
  .one-pixl-top, .one-pixl-bottom {
     229px;
  }
  .one-pixl-top::after, .one-pixl-bottom::after {
     229px;
    transform: scaleY(0.5);
  }
  .one-pixl-top::after {
    top: 0;
    left: 0;
  }
  .one-pixl-bottom::after {
    bottom: 0;
    left: 0;
  }
  .one-pixl-right, .one-pixl-left {
    height: 229px;
  }
  .one-pixl-right::after, .one-pixl-left::after {
    height: 229px;
    transform: scaleX(0.5);
  }
  .one-pixl-right::after {
    right: 0;
  }
  .one-pixl-left::after {
    left: 0;
  }

5. 解决键盘归位的问题

<div class="address"><textarea maxlength="100" placeholder="请填写您的具体收货地址，具体到门牌号"
    @blur="getBlur"
    @change="getAddress" v-model="address"
    ></textarea></div>

getBlur() {
  setTimeout(() => {
      //滚动到顶部
      window.scrollTo(0, 0);
      //滚动到底部
      window.scrollTo(0, document.documentElement.clientHeight);
    }, 50)
},

6. cnzz埋点

<script src="https://s4.cnzz.com/z_stat.php?id=1259942212&web_id=1259942212" language="JavaScript"></script>
<script type='text/javascript'>
    var _czc = _czc || [];
    _czc.push(["_setAccount", "1259942212"]);
</script>

// setEvent({name: 'click-channel-pay'})
function setEvent(params) {
  window._czc && window._czc.push(["_trackEvent", params.page || 'common', params.action || 'click', params.name || '', 1])
}

setEvent({ name: 'summary-page-skin-' + skin.skin })