대형 화면 요소의 해상도 적응을 구현하기 위한 Vue 명령에 대한 자세한 설명-View.js-php.cn

대형 화면 요소의 해상도 적응을 구현하기 위한 Vue 명령에 대한 자세한 설명

WBOY

풀어 주다： 2022-10-02 09:00:28

앞으로

2858명이 탐색했습니다.

이 글은 vue에 대한 관련 지식을 제공합니다. 주로 일반적인 적응 체계 및 CSS 스케일링 체계 등을 포함하여 대형 화면 요소의 해상도 적응을 구현하기 위한 Vue 지침에 대한 자세한 설명을 소개합니다. 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다. .

대형 화면 요소의 해상도 적응을 구현하기 위한 Vue 명령에 대한 자세한 설명

[관련 권장사항: javascript 비디오 튜토리얼, vue.js 튜토리얼]

프런트엔드 기술의 지속적인 발전으로 데이터센터(중간 플랫폼), 사물 인터넷 장치 개발 업데이트되고 대중화되면서 점점 더 많은 소유자(프로젝트)가 시스템에 하나 이상의 대형 시각적 화면을 추가하여 데이터 변경 사항, 위치 변경 등을 중앙 집중식으로 표시하는 것을 선호합니다. "상황" .

물론 프로그래머는 일반적으로 프로젝트를 완료하는 한 "상사"가 어떻게 생각하는지 신경 쓰지 않습니다. 하지만 종종 다음과 같은 문제가 있습니다. 큰 화면 템플릿을 가지고 있지만 사용자의 브라우저 해상도가 충분하지 않거나 일부는 북마크 바가 있고 일부는 없거나 또는 일부는 전체 화면이고 일부는 작은 창입니다. 이러한 방식으로 코드가 다양한 해결 시나리오에 적응해야 한다는 요구 사항이 있습니다.

1. 일반적인 적응 솔루션

우리가 일반적으로 사용하는 웹측 적응 솔루션은 다음과 같습니다.

vw/vh는 백분율로 구현되어 창 크기에 따라 요소가 자동으로 조정됩니다.
fontSize 협력 rem을 사용하여 "단위 너비"의 통일을 달성합니다
다양한 해상도 범위에 따라 페이지 레이아웃을 조정합니다
중앙 레이아웃, 최소 너비와 협력

현재 대부분의 화면 적응 솔루션의 원리는 위의 내용을 기반으로 합니다. 하지만 이러한 방법에는 큰 단점도 있습니다. 브라우저 텍스트 크기가 최소입니다!

1080p 이상의 해상도를 가진 일반 화면에서는 대부분의 디자인 도면의 비율과 표시 효과를 완벽하게 복원할 수 있습니다. 그러나 특정 시스템에 페이지 내용이 너무 많거나 브라우저에서 사용하는 해상도(물리적 해상도가 아님)가 전체 디스플레이 요구 사항을 충족하지 못하는 경우 위 방법을 사용하면 계산된 텍스트 크기가 더 작아질 수 있습니다. 브라우저의 최소 글꼴 크기 이때 텍스트 너비가 요소를 초과하므로 페이지 스타일이 무너질 수 있습니다.

중앙 레이아웃과 최소 너비로 디스플레이 효과를 보장할 수 있지만 대형 화면 프로젝트에는 적합하지 않습니다.

2. CSS3 스케일링 솔루션

위의 솔루션이 만족스럽지 않으면 모두가 일반적으로 CSS3 스케일 스케일링이라는 다른 솔루션을 사용하게 됩니다.

디자인 도면의 크기 비율과 실제 페이지 표시 영역 크기를 계산하여 요소의 배율 비율을 동적으로 조정합니다.

개인적으로는 이것이 작은 해상도에서도 디스플레이 내용과 스타일을 보존하는 가장 좋은 방법이라고 생각합니다.

물론 이 방법에는 여전히 몇 가지 단점이 있습니다.

내부에 캔버스 요소가 있으면 캔버스 내부의 내용이 왜곡될 수 있습니다
Amap 1 .x는 이벤트를 발생시킵니다 좌표 오프셋(2.0에서 수정됨)
...

3. 스케일링 지침 캡슐화

다음은 Vue의 사용자 정의 지침에 대한 간략한 검토입니다. 컴포넌트/요소 해당 처리 로직은 로딩, 업데이트, 소멸 등 서로 다른 시점에 실행됩니다.

Vue의 사용자 정의 명령에는 다음 후크 기능이 포함됩니다.

삽입: 상위 노드가 삽입될 때 실행됩니다.
update: 구성 요소가 업데이트를 트리거할 때 실행됩니다.
unbind: 요소가 바인딩 해제(파괴)될 때 실행되고 한 번만 실행됩니다.

여기에서는 초기화 중에 요소 확대/축소를 조정하기 위해 브라우저의 크기 조정 이벤트만 바인딩하면 되므로 물론 코드 로직을 최적화하고 리소스 소비를 줄이려면 바인딩 해제 단계에서 크기 조정 이벤트의 콜백 함수도 취소해야 합니다.

코드는 다음과 같습니다.

// 缩放指令
import Vue from "vue";
function transformScale(el, options) {
  const { target = "width", origin = "top left" } = options;
  Vue.nextTick(() => {
    // 获取显示区域高宽
    const width = window.innerWidth;
    const height = window.innerHeight;
    el.style.transformOrigin = origin;
    if (target === "ratio") {
      const scaleX = width / CONF.width;
      const scaleY = height / CONF.height;
      el.style.transform = `scaleX(${scaleX}) scaleY(${scaleY})`;
    } else {
      let scaleProportion = 1;
      if (target === "width") {
        scaleProportion = width / CONF.width;
      }
      if (target === "height") {
        scaleProportion = height / CONF.height;
      }
      el.style.transform = `scale(${scaleProportion})`;
    }
  });
}
function inserted(el, binding) {
  const options = binding.options || { passive: true };
  const callback = () => transformScale(el, binding.value);
  window.addEventListener("resize", callback);
  callback();
  el._onResize = {
    callback,
    options
  };
}
function unbind(el) {
  if (!el._onResize) {
    return;
  }
  const { callback } = el._onResize;
  window.removeEventListener("resize", callback);
  delete el._onResize;
}
export const Scale = {
  inserted,
  unbind
};
export default Scale;

로그인 후 복사

설명:

기본 페이지 크기를 지정하려면 전역 구성 CONF 개체가 필요합니다
순서 페이지가 로드되었는지 확인하려면 dom 요소를 가져올 수 있으며 Vue.nextTick을 호출해야 합니다
청취 이벤트를 파괴해야 합니다

전체 코드는 실제로 매우 간단합니다. 확대/축소 비율을 조정하는 것입니다. resize 이벤트를 수신하여 요소를 삭제합니다.

하지만 여기서는 더 많은 상황에 적응하기 위해 약간의 구성도 만들었습니다.

비율 계산 방법을 확인하기 위해 대상 구성을 수신합니다. 너비 또는 높이를 통합 크기 조정 표준으로 사용하거나 별도로 계산할 수 있습니다. 피해야 할 다른 위치 스케일링 오프셋
에는 바인딩된 요소의 크기가 포함되지 않으며 기본 크기만 필요합니다. 코드를 작성할 때 디자인 도면에 따라 요소 크기를 직접 구성할 수 있습니다.
물론 이 지침은 완벽하다고는 할 수 없고, 여전히 허점이 많습니다. 예를 들어 흔들림 방지 기능이 없고, 크기 조절이 CSS에서 지정한 크기를 변경하지 않으며, 스크롤 막대가 나타나는 경향이 있습니다. 차트와 지도의 경우 표시 문제가 자주 발생하므로 나중에 더 추가할 예정입니다. 몇 가지 새로운 지침이 있지만 해상도 적응 문제는 여전히 실제 상황에 따라 결정되어야 합니다.

【관련 추천:

javascript 비디오 튜토리얼

vue.js 튜토리얼

】

위 내용은 대형 화면 요소의 해상도 적응을 구현하기 위한 Vue 명령에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!