Detailed explanation of Vue instruction to implement resolution adaptation of large screen elements

This article brings you relevant knowledge about vue. It mainly introduces the detailed explanation of Vue instructions to implement resolution adaptation of large screen elements, including common adaptation schemes and css scaling schemes, etc. Wait, let’s take a look at it together, I hope it will be helpful to everyone.

[Related recommendations: javascript video tutorial, vue.js tutorial】

With front-end technology With the continuous development of data center (middle platform) and other concepts, and the update and popularization of Internet of Things devices, more and more owners (projects) like to add one or more large visual screens to the system for Centrally display data changes, location changes, etc. Bosses also prefer to call it "situation".

Of course, programmers generally don’t care what the “bosses” think, as long as they complete the project. But there is often a problem like this: I have a large-screen template, but the user's browser resolution is not enough, or some have a bookmark bar and some don't, or some are full screen and some are just small windows. In this way, there are requirements for the code to adapt to different resolution scenarios.

1. Common adaptation solutions

The web-side adaptation solutions we usually use mainly include the following:

• vw/vh is implemented with percentage, allowing elements to automatically adjust according to the window size
• fontSize is combined with rem to achieve the unification of "unit width"
• Adjust page layout according to different resolution ranges
• Center layout, with minimum width

The principles of most current screen adaptation solutions are based on the above methods, but these methods also have great disadvantages:Browser text has a minimum size!

On ordinary screens with a resolution of 1080p and above, the proportions and display effects of most design drawings can be perfectly restored. However, if there is too much page content in a certain system, or the resolution used by the browser (not the physical resolution) does not meet the full display requirements, using the above methods may cause the calculated size of text If it is smaller than the browser's minimum font size, the page style may collapse because the text width exceeds the element.

The center layout and the minimum width can ensure the display effect, but it is not suitable for large-screen projects.

2. CSS3 scaling solution

When the above solutions are not satisfied, everyone will generally use another solution: CSS3 scale scaling.

Dynamically adjust the scaling ratio of elements by calculating the size ratio of the design drawing and the actual page display area size.

Personally, I think this is the best way to preserve the display content and style at small resolutions.

Of course, this method still has some disadvantages:

• After scaling, the edge display may be blurred
• If there is a canvas element inside, it may cause the inside of the canvas to be blurred Content rendering distortion
• Amap 1.x will cause event coordinate offset (2.0 has been fixed)
• ...

3. Encapsulation A scaling instruction

Here is a brief review of Vue's custom instructions: by configuring custom instructions and binding parameters, the corresponding processing logic is executed at different times such as component/element loading, updating, and destruction.

Vue’s custom instructions include the following hook functions:

• bind: Executed when parsing the instruction binding, only executed once
• inserted: Insert parent Executed when the node is
• update: Executed when the component triggers an update
• componentUpdated: Executed after all components are updated
• unbind: Executed when the element is unbound (destroyed), and only executed Once

Here because we only need to bind the browser's resize event to adjust the element scaling during initialization, we only need to configure inserted; of course, in order to optimize the code logic and reduce resource consumption, etc. , it is also necessary to cancel a callback function of the resize event in the unbind stage.

The code is as follows:

// 缩放指令
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;

Description: The

• instruction receives an object parameter to specify the proportion calculation method and scaling positioning
• requires one Globally configure the CONF object to specify the default page size
• In order to ensure that the page has been loaded and the dom element can be obtained, Vue.nextTick needs to be called
• The listening event needs to be destroyed

The whole code is actually very simple, which is to adjust the zoom ratio of the element by listening to the resize event.

But here I also made a little configuration to adapt to more situations:

• Receive a target configuration to confirm the proportion calculation method; you can use width or height as a unified scaling standard, or you can calculate it separately
• Receive the origin configuration of transform to ensure elements in different positions It can be zoomed to different positions to avoid scaling offset
• It does not involve the size of the bound element, only the default size is required; when writing code, you can directly configure the element size according to the design drawing

Of course, this command cannot be said to be perfect. There are still many loopholes, such as no anti-shake, scaling will not change the size specified by css, scroll bars are prone to appear, etc.;

And because of the previous The project also involves a lot of charts and maps, which often leads to some display problems, so some new instructions are added later, but the issue of resolution adaptation still needs to be determined based on the actual situation.

【Related recommendations: javascript video tutorial, vue.js tutorial】

The above is the detailed content of Detailed explanation of Vue instruction to implement resolution adaptation of large screen elements. For more information, please follow other related articles on the PHP Chinese website!