采用flex布局,父组件width为百分比,解决子组件canvas画布width自适应问题

news/2024/9/28 7:46:16

 

创建EleResize.js文件(拷贝以下代码即可)

var EleResize = {
  _handleResize: function (e) {
    var ele = e.target || e.srcElement
    var trigger = ele.__resizeTrigger__
    if (trigger) {
      var handlers = trigger.__z_resizeListeners
      if (handlers) {
        var size = handlers.length
        for (var i = 0; i < size; i++) {
          var h = handlers[i]
          var handler = h.handler
          var context = h.context
          handler.apply(context, [e])
        }
      }
    }
  },
  _removeHandler: function (ele, handler, context) {
    var handlers = ele.__z_resizeListeners
    if (handlers) {
      var size = handlers.length
      for (var i = 0; i < size; i++) {
        var h = handlers[i]
        if (h.handler === handler && h.context === context) {
          handlers.splice(i, 1)
          return
        }
      }
    }
  },
  _createResizeTrigger: function (ele) {
    var obj = document.createElement('object')
    obj.setAttribute(
      'style',
      'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;'
    )
    obj.onload = EleResize._handleObjectLoad
    obj.type = 'text/html'
    ele.appendChild(obj)
    obj.data = 'about:blank'
    return obj
  },
  _handleObjectLoad: function () {
    this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__
    this.contentDocument.defaultView.addEventListener(
      'resize',
      EleResize._handleResize
    )
  },
}
if (document.attachEvent) {
  // ie9-10
  EleResize.on = function (ele, handler, context) {
    var handlers = ele.__z_resizeListeners
    if (!handlers) {
      handlers = []
      ele.__z_resizeListeners = handlers
      ele.__resizeTrigger__ = ele
      ele.attachEvent('onresize', EleResize._handleResize)
    }
    handlers.push({
      handler: handler,
      context: context,
    })
  }
  EleResize.off = function (ele, handler, context) {
    var handlers = ele.__z_resizeListeners
    if (handlers) {
      EleResize._removeHandler(ele, handler, context)
      if (handlers.length === 0) {
        ele.detachEvent('onresize', EleResize._handleResize)
        delete ele.__z_resizeListeners
      }
    }
  }
} else {
  EleResize.on = function (ele, handler, context) {
    var handlers = ele.__z_resizeListeners
    if (!handlers) {
      handlers = []
      ele.__z_resizeListeners = handlers

      if (getComputedStyle(ele, null).position === 'static') {
        ele.style.position = 'relative'
      }
      var obj = EleResize._createResizeTrigger(ele)
      ele.__resizeTrigger__ = obj
      obj.__resizeElement__ = ele
    }
    handlers.push({
      handler: handler,
      context: context,
    })
  }
  EleResize.off = function (ele, handler, context) {
    var handlers = ele.__z_resizeListeners
    if (handlers) {
      EleResize._removeHandler(ele, handler, context)
      if (handlers.length === 0) {
        var trigger = ele.__resizeTrigger__
        if (trigger) {
          trigger.contentDocument.defaultView.removeEventListener(
            'resize',
            EleResize._handleResize
          )
          ele.removeChild(trigger)
          delete ele.__resizeTrigger__
        }
        delete ele.__z_resizeListeners
      }
    }
  }
}
export { EleResize }
 
引入文件

 在子组件中添加代码即可完美解决问题

 

 

let listener = function () {
          myChart.resize();
        }
EleResize.on(chartDom, listener)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ryyt.cn/news/30184.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

VMware SD-WAN 6.0 发布(含下载) - 领先的 SD-WAN 解决方案

VMware SD-WAN 6.0 发布(含下载) - 领先的 SD-WAN 解决方案VMware SD-WAN 6.0 发布(含下载) - 领先的 SD-WAN 解决方案 VMware VeloCloud SD-WAN, 全球 SD-WAN 领导者 请访问原文链接:https://sysin.org/blog/vmware-sd-wan-6/,查看最新版。原创作品,转载请保留出处。 作…

Copilot - OpenAI与GitHub联合出品的自动代码生成AI+VirtualLCD - 可用于 GUI 移植的 LCD 模拟器

1、AntOS - 适用 8051 的超轻量级实时操作系统 AntOS 是一款超轻量级实时操作系统,抢占式调度极简内核,专门为小型家电及轻量型物联网终端设计,适合在8051为内核的MCU上运行。项目主页: https://gitee.com/zeweni/ant-osAntOS 提供层级服务,可以进行任意裁剪。内核层包含两…

nRF51_Platform - 基于nRF51平台(蓝牙4.0)的轻量级SDK+AliOS Things - 阿里出品轻量级物联网嵌入式操作系统

1、AliOS Things - 阿里出品轻量级物联网嵌入式操作系统 AliOS Things 发布于2017年杭州云栖大会, 是 AliOS 家族旗下的、面向IoT领域的、高可伸缩的物联网操作系统。AliOS Things 致力于搭建云端一体化IoT基础设施,具备极致性能、极简开发、云端一体。项目主页: https://gi…

SciTech-Mathmatics-ProbabilitiesAndStatistics-Distribution-is-all-you-need: 概率统计到深度学习

Distribution-is-all-you-need 概率统计到深度学习,四大技术路线图谱,都在这里! https://github.com/graykode/distribution-is-all-you-need 自然语言处理路线图: 数学基础 -> 语言基础 -> 模型和算法 项目作者:Tae-Hwan Jung, Github:graykode, 2019-09-30 13:35,…

gcov - 标准c/c++代码覆盖率测试工具+lcov - GCC测试覆盖率的前端图形展示工具+gprof - 标准c/c++代码性能分析工具

1、advent-calendar-of-circuits-2020 - 一个月每天用KiCad设计一个PCB项目 Gregory Davill 是来自澳大利亚的一个技术牛人,在开源硬件领域非常有名且活跃。他在2020年12月坚持每一天设计一个电路板,用 KiCad 完成电路设计到 PCB 的布局布线完成,这便是 advent-calendar-of-…

lua~基本语法

学习 Lua 的必要性nginx开发 apisix,kong插件开发语言特点语句结束没有分号 跟 JavaScript 很像 默认定义的是全局变量,定义局部变量需要加 local 关键字 数组索引从1开始 没有 i++ 操作符号,只能 i = i + 1注释单行注释-- 注释内容多行注释--[[注释内容]]--内置数据类型 总共…

lua~IDEA中调试lua脚本

开发工具IDE工具:jetbrain IDEA 工具插件:EmmyLua本机lua项目和调试lua文件添加lua项目模板,安装完EmmyLua插件就有了添加模板项目后,在项目中添加lua类型的文件为lua项目添加一个编译调试器在调试器中,配置lua和lua项目的信息现在就可以输出hell world了MobDebug pkulche…

salesforce零基础学习(一百三十六)零碎知识点小总结(八)

本篇参考: Salesforce LWC学习(七) Navigation & Toast https://developer.salesforce.com/docs/platform/lwc/guide/use-navigate-url-addressable.html https://help.salesforce.com/s/articleView?id=release-notes.rn_lwc_UrlAddressable.htm&release=250&ty…