[TIL] 220427

1. Vuetify

• 모바일 사이즈에서만 보여지게 적용

<v-app-bar v-if="$vuetify.breakpoint.xsOnly" app />

2. SubtleCrypto.digest()

• 테스트 서버(http)에서는 작용을 안함
• crypto-js 사용해서 해결
• 참고
  • TypeError, 'digest' of undefined, in development environment

3. 구글 autocomplete & autofill

• autocomplete 들어먹질 않음

  • Vue Google Chrome Password Autofill disable 페이지 참고해 vue-disable-autocomplete를 설치해 autocomplete='off'를 했는데 element-ui + vue-disable-autocomplete 라이브러리들이 같이 작동을 못하는건지 문제가 생겼다.
    폼 안에 있는 모든 input typing이 안된다...

  • 아 진짜 빡쳤는데 우연찮게 How to turn off form autocompletion들어가서 보고 autocomplete='new-password'넣었더니 일단 autofill은 안된다. autocomplete는 패스워드만 focus해도 계속 뜬다...

    작동방법
    -password에 autocomplete="new-password"넣었더니 input에 아이디랑 password input이 비워져있다.

    <el-form method="post" action="/form">
      <el-input v-model="id"></el-input>
      <el-input v-model="pass"
              placeholder="비밀번호를 입력 해주세요"
              type="password"
              autocomplete="new-password"></el-input>
    </form>

참고

• 크롬 브라우저 비밀번호 자동완성 방지 (autocomplete 불가 시)
• autocomplete= off not working in chrome
• [HTML] Chrome 자동 완성 사용 중지
• Disabling Chrome Autofill