Vue指令实现大屏元素分辨率适配详解

目录
  • 前言
  • 1. 常见的适配方案
  • 2. CSS3 缩放方案
  • 3. 封装一个缩放指令
  • 4. 后记

前言

随着前端技术的不断发展、数据中心(中台)之类的概念的不断升级、物联网设备的更新和普及,越来越多的业主(项目)喜欢在系统中添加一个或者多个可视化大屏,用来集中的展现数据变化、位置变化等等,老板们也更喜欢称之为“态势”。

当然,作为程序员一般都不关心“老板们”的想法,只要完成项目即可。但是经常会有这样的问题:我有一个大屏的模板,但是用户的浏览器分辨率不够,或者有的有书签栏有的没有书签栏,更或者是有的全屏了有的只是小窗口,这样就有了代码对不同分辨率场景下的适配需求了。

1. 常见的适配方案

平时我们使用的 web 端的适配方案,主要有以下几种:

  • vw/vh 配合百分比实现,让元素根据窗口大小进行自动调整
  • fontSize 配合 rem 实现“单位宽度”的统一
  • 根据不同的分辨率范围调整页面布局
  • 版心布局,配合最小宽度

目前大多数屏幕适配方案的原理都是采用的以上的几种方式,但是这几种方式也有很大的弊端:浏览器文字有最小尺寸!

在一般的 1080p 及以上的分辨率的屏幕中,大多数设计图的比例和显示效果都能完美还原。但如果某个系统的页面内容太多,或者浏览器部分使用的分辨率(不是物理分辨率)达不到完整显示的要求,采用上面的几种方式就有可能造成 文字的计算大小小于浏览器的最小字体大小,此时就有可能因为文字宽度超出元素而导致页面样式崩溃。

版心布局配合最小宽度可以保证显示效果,但是不适合大屏项目。

2. CSS3 缩放方案

在上面的几种方案都不满足时,大家一般就会采用另外一种方案:CSS3 scale 缩放。

通过计算设计图尺寸比例与实际的页面显示区域大小,来动态调整元素的缩放比例。

个人认为这是针对小分辨率情况下保留显示内容及样式最好的一种处理方式。

当然,这种方式依然有一些弊端:

  • 缩放后可能会造成边缘显示模糊
  • 如果内部存在 canvas 元素,可能导致 canvas 内部的内容渲染失真
  • 高德地图 1.x 会导致事件坐标偏移 (2.0 已经修复)
  • ...

3. 封装一个缩放指令

这里简单回顾一下 Vue 的自定义指令:通过配置自定义指令和绑定参数,在组件/元素加载、更新、销毁等不同时期执行对应的处理逻辑。

Vue 的自定义指令包含一下几个钩子函数:

  • bind: 解析到指令绑定时执行,仅执行一次
  • inserted: 插入父节点时执行
  • update:组件触发更新时执行
  • componentUpdated:所有组件更新结束之后执行
  • unbind:元素解绑(销毁)时执行,也只执行一次

这里因为我们只需要在初始化时绑定浏览器的 resize 事件来调整元素缩放,所以只需要配置 inserted 即可;当然,为了优化代码逻辑,减少资源消耗等情况,也需要在 unbind 阶段去取消 resize 事件的一个回调函数。

代码如下:

// 缩放指令
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 事件去调整元素的缩放比例。

但是这里我也做了一点小的配置,用来适应更多的情况:

  • 接收一个 target 配置,用来确认比例计算方式;可以以宽度或者高度作为统一的缩放标准,也可以分别计算
  • 接收 transform 的 origin 配置,保证不同位置的元素可以缩放到不同的位置,避免缩放偏移
  • 不涉及绑定元素的尺寸,只需要默认尺寸即可;写代码时可以直接根据设计图配置元素尺寸

4. 后记

当然,这个指令不能说有多完美,依然有很多有漏洞的地方,比如没有防抖、缩放不会改变css指定的尺寸,容易出现滚动条等;

并且因为之前的项目中还涉及到很多图表、地图,也经常导致一些显示问题,所以后面有增加了一些新的指令,但是分辨率适配这个问题还是要根据实际情况来确定具体的方案。

以上就是Vue指令实现大屏元素分辨率适配详解的详细内容,更多关于Vue指令大屏元素分辨率适配的资料请关注我们其它相关文章!

(0)

相关推荐

  • vue大屏展示适配的方法

    本文实例为大家分享了vue大屏展示适配的具体代码,供大家参考,具体内容如下 1.utils文件夹建一个文件cv以下代码 export function useIndex (appRef) { // * appRef指向最外层容器 // * 定时函数 let timer = null // * 默认缩放值 const scale = { width: '1', height: '1' } // * 设计稿尺寸(px) const baseWidth = 1920 const baseHeight

  • vue项目适配大屏端的方法示例

    浅析rem 首先rem是css单位,相比于px固定的像素单位,rem更加的灵活,还有现在也比较好的vm.如果从未了解过,可以先过过眼 rem自适应.CSS3的REM设置字体大小 font size of the root element. 简单来说,rem就是根据html元素的字体大小来计算单位的.我们的需求就是说,根据不同的分辨率,我们元素的大小能够有所对应的变化,在视觉上能够做到很舒服的效果.想想我们在做pc端的时候,一般都是中间固定比如1200px像素,然后最小1200px,两边留白,这样

  • vue+px2rem实现pc端大屏自适应的实例代码(rem适配)

    配置前言 项目构建:基于vue-cli3构建,使用postcss-px2rem px2rem-loader进行rem适配 实现原理:每次打包,webpack通过使用插件postcss-px2rem,帮我们自动将px单位转换成rem单位 px2rem是一个插件,功能是将px自动转换为rem,帮助开发者减少像素间的相互转换计算过程. 前方有坑:UI框架部分组件使用JavaScript将css作为内联样式直接写在html标签内,打包适配时不会读取相关css,所以要配置相关样式,在style中需要" !

  • Vue2.0实现自适应分辨率

    本文实例为大家分享了Vue2.0实现自适应分辨率的具体代码,供大家参考,具体内容如下 1. 前台框架:Vue2.0+elementUI 2.15.7 2. 开发工具:vs code 3. 安装所需架包: "postcss-import": "12.0.1", "postcss-loader": "4.0.1", "postcss-pxtorem": "^5.1.1", 检查是否安装&qu

  • 关于vue自适应布局(各种浏览器,分辨率)的示例代码

    目录 1.前言 2.vue的布局风格 2.1vue3需要配合element plus进行布局 2.2src下面创建layout文件夹 3.测试效果 4.总结 1.前言 spa页面的layout布局对于前端项目的影响至关重要,在我们进行web端开发的时候,前端的各种大小屏幕,各种内核的浏览器不同,会导致我们的页面呈现出不一样的效果,如何进行更好的取舍,怎么能够达到产品对于系统展示效果的满意度,其实我们要前端有一套布局理念,这种理念指导我们如何进行优雅布局,怎么才能不被不合理的需求左右.理念分为以下

  • Vue实现PC端分辨率自适应的示例代码

    目录 方案 安装依赖 引入依赖 px转换成rem 修改flexible.js 参考博客 方案 lib-flexible+ px2remLoader lib-flexible:阿里可伸缩布局方案 px2rem-loader:px转rem 安装依赖 npm install px2rem-loader -D npm install lib-flexible -S 引入依赖 main.js引入lib-flexible import 'lib-flexible' px转换成rem vue-loader的o

  • Vue指令实现大屏元素分辨率适配详解

    目录 前言 1. 常见的适配方案 2. CSS3 缩放方案 3. 封装一个缩放指令 4. 后记 前言 随着前端技术的不断发展.数据中心(中台)之类的概念的不断升级.物联网设备的更新和普及,越来越多的业主(项目)喜欢在系统中添加一个或者多个可视化大屏,用来集中的展现数据变化.位置变化等等,老板们也更喜欢称之为“态势”. 当然,作为程序员一般都不关心“老板们”的想法,只要完成项目即可.但是经常会有这样的问题:我有一个大屏的模板,但是用户的浏览器分辨率不够,或者有的有书签栏有的没有书签栏,更或者是有的

  • python可视化大屏库big_screen示例详解

    目录 big_screen 特点 安装环境 输入数据 本地运行 在线部署 对于从事数据领域的小伙伴来说,当需要阐述自己观点.展示项目成果时,我们需要在最短时间内让别人知道你的想法.我相信单调乏味的语言很难让别人快速理解.最直接有效的方式就是将数据如上图所示这样,进行可视化展现. 具体如下: big_screen 特点 便利性工具, 结构简单, 你只需传数据就可以实现数据大屏展示. 安装环境 pip install -i https://pypi.tuna.tsinghua.edu.cn/simp

  • echart实现大屏动效示例详解

    目录 1.通过dataZoom实现柱状图动态前移效果 2.叠加流光效果 3.柱状图光亮轮播 1.通过dataZoom实现柱状图动态前移效果 最近做大屏相关需求,产品说需要炫酷一点的效果,于是做了一些echart相关的动效 设置dataZoom当前缩放值,加定时器,实现轮播效果. 示例: option = { color: ['#1E90FF', '#FFA500'], tooltip: { trigger: 'axis', axisPointer: {} }, grid: { left: 20,

  • Vue.js实现大屏数字滚动翻转效果

    大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最终实现的效果: 整体思路: 在实现此效果之前,我们先来捋一下思路,用思维导图来设计一下我们的实现步骤,如下: 你可以审查元素,下载数字背景图片,复制图片地址,或者使用其他背景图片.背景颜色 有了以上的设计流程,我们先来简单实现一下: // CSS代码 <style> .box-item { position: relative; display: inline-

  • vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能

    随着前端技术的飞速发展,大数据时代的来临,我们在开发项目时越来越多的客户会要求我们做一个数据展示的大屏,可以直观的展示用户想要的数据,同时炫酷的界面也会深受客户的喜欢. 大屏展示其实就是一堆的图表能够让人一目了然地看到该系统下的一些基本数据信息的汇总,也会有一些实时数据刷新,信息预警之类的.笔者在之前也做过一些大屏类的数据展示,但是由于都是一些图表类的,觉得没什么可说的,加之数据也都牵扯到公司,所以没有沉淀下来什么. 最近有朋友要做一个大屏,问了自己一个问题,自己也刚好做了一个简单的大屏数据展示

  • vue移动端屏幕适配详解

    flexible vue移动端屏幕适配,查看项目地址 效果预览 # 项目clone git clone git@github.com:NicolasGui/flexible.git # 进入项目目录 cd flexible # 安装依赖 npm install # 启动服务 localhost:8080 npm run dev 原理概述 插件安装 # 插件一:amfe-flexible npm install amfe-flexible --save #  插件二: node-sass npm

  • 使用Vue.observable()进行状态管理的实例代码详解

    随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是 vue.js 2.6 新增加的 Observable API ,通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况. 先看下官网描述,如下图 observable()方法,用于设置监控属性,这样就可以监控viewModule中的属性值的变化,从而就可以动态的改变某个元素中的值,监控属性的类型不变量而

  • vue和better-scroll实现列表左右联动效果详解

    一.实现思路 (1)实现上是左右分别一个better-scroll列表 (2)利用计算右侧列表每一个大区块的高度来计算左侧的位置 二.实现 1.实现左右两个better-scroll (1)dom结构(better-scroll要求,会把最外层dom的第一个子元素作为要滚动的区域) 左边滚动列表dom <div class="menu-wrapper" v-el:menu-wrapper> <ul> <li v-for="item in good

  • Flutter应用框架搭建之屏幕适配详解

    目录 原理 flutter_screenutil 添加依赖 初始化 使用 效果 其他 Api 因移动设备的多样性,特别是 Android 的碎片化严重,存在各种各样的分辨率,而 Flutter 跨平台开发又需同时支持 Android 和 iOS ,为尽可能的还原设计图效果提升用户体验,屏幕适配就势在必行了. Flutter 暂时没有官方的屏幕适配方案,在 Flutter 项目开发中目前大部分的适配方案都是通过比例来进行适配,是一个通用的适配方法,该适配方法也在前端.Android.iOS.小程序

  • Vue完整版和runtime版的区别详解

    目录 创建Vue实例的三种方式 从HTML得到视图 用JS构建视图 使用vue-loader 两者对比 最佳实践 SEO友好 创建Vue实例的三种方式 从HTML得到视图 前提:使用完整版,CDN引入或者修改配置 const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ // ... configureWebpack: { resolve: { alias: { vue$: 'vue/

随机推荐