vue-cli에서 응답식 레이아웃을 실현하는 방법

2445 단어 vue-cli응답식 레이아웃
우리는 프론트 엔드 개발을 진행하면서 PC와 모바일 엔드의 적합성에 직면하게 될 것이다. 이런 문제에 직면하면 어떤 회사들은 두 개의 페이지를 준비한다. 이동은 이동이고 PC는 PC이다. 응답식 레이아웃은 사용자의 기종에 따라 서로 다른 페이지를 보여주는 것이다. 쓸데없는 말은 하지 않고 코드를 붙이는 것이다
우선 우리의 이 기능은 vuex를 빌려 이루어진 것입니다. 다운로드하지 않은 파트너가 먼저 다음

yarn add vuex
응답식 레이아웃이라면 두 세트의 css를 준비해야 한다. 하나는 PC 쪽의 css이고, 하나는 이동 쪽의 css이다. 우리는 잠시 PC 쪽의 스타일을 컴퓨터라고 하고, 이동 쪽의 스타일을 모바일이라고 부른다.
저희가 먼저 해야 할 게 현재 화면의 너비예요.

state: {
  screenWidth: document.documentElement.clientWidth,
  screenHeight: document.documentElement.clientHeight
 }
이것은 vuex의state입니다. 우리는 다음에 화면의 폭을 실시간으로 감시해야 하기 때문에 screenWidth를 바꾸는 방법을 제공해야 합니다. 그래서 저는 mutations를 썼습니다.

mutations: {
  setWidth (state, value) {
   state.screenWidth = value
  },
  setHeight (state, value) {
   state.screenHeight = value
  }
 }
이렇게 하면 우리의 vuex 파일은 다 썼고, 그 다음은 APP이다.vue, 이 파일에 윈도우를 추가해야 합니다.onresize 이벤트는 vuex의 screenWidth 값을 실시간으로 업데이트합니다. 여기서 보조 함수를 사용했습니다.

import { mapState, mapMutations } from 'vuex'
mounted 갈고리 함수에 이벤트 추가

mounted () {
  window.onresize = () => { 
   this.setWidth(document.documentElement.clientWidth) 
  }
}
이것은 마치 우리 웹 페이지의 내비게이션과 같다. 이동할 때 우리는 그것을 밑에 필요로 하고, PC할 때 우리는 그것을 정상에 필요로 한다. 그러면 우리는nav에 있을 수 있다.vue 이 구성 요소에서watch나computed로 screenWidth의 값을 감청합니다. 여기에서는computed를 사용합니다.

<ul :class="computedPhone">// screenWidth class 
   <router-link to='/file' tag="li" active-class="active"> </router-link>
   <router-link to='/cinma' tag="li" active-class="active"> </router-link>
   <router-link to='/center' tag="li" active-class="active"> </router-link>
</ul>



computed: {
  ...mapState('stylesheet', ['screenWidth']),
  computedPhone () {
   if (this.screenWidth < 1024) {
    return 'mobile'
   } else {
    return 'computer'
   }
  }
 }
이렇게 하면 css 두 세트만 쓰면 응답식 레이아웃을 실현할 수 있다
vue-cli에서 응답식 레이아웃을 실현하는 방법에 대한 이 글은 여기까지 소개되었습니다. 더 많은 vue-cli 응답식 레이아웃 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!
pandas || df.dropna () 부족한 값 삭제 작업
TIL 02/28 TIL, 회고

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage