【快应用】通用方法getBoundingClientRect的使用

【关键词】

快应用开发、通用方法、getBoundingClientRect

【背景】
快应用通用方法中提供了getBoundingClientRect方法来获取当前组件的布局位置,之前处理的快应用问题中,有个cp却把这种场景误解为可以获取到文字的宽度和高度,这是不合理的,当前快应用并没有提供可以获取文字高度和宽度的方法。那么今天我们就来具体学习一下getBoundingClientRect的使用。

【介绍】

1、调用方法:this.$element('xxx').getBoundingClientRect(Object object)

2、参数说明:

cke_565.png

3、回调成功返回值说明:

cke_1362.png

4、getBoundingClientRect调用的注意事项:

  • popup、option、span、picker 等组件不支持调用此方法。
  • 由于在onInit方法中组件还没有创建,所以在onInit方法中调用此方法会出现js错误。
  • 由于在onReady方法中组件还没有渲染完成,所以在onReady方法中调用此方法获取结果都为0。请勿在onReady之前和onReady中调用此方法。

【成果展示】

示例代码如下:

<template>
  <!-- Only one root node is allowed in template. -->
  <div class="container">
    <text id="origin-text" class="origin-text">测</text>
  </div>
</template>

<style>
  .container {
    flex-direction: row;
    justify-content: center;
    margin-top: 30px;
  }
  .origin-text {
    width: 80px;
    font-size: 60px;
    height: 80px;
    font-weight: 500;
    border: 1px solid #000000;
  }
</style>

<script>
  module.exports = {
    data: {
      rect: {}
    },
    onInit() {
      this.$page.setTitleBar({
        text: 'getBoundingClientRect',
        textColor: '#ffffff',
        backgroundColor: '#007DFF',
        backgroundOpacity: 0.5,
        menu: true
      });
    },
    onShow() {
      var that = this;
      that.$element('origin-text').getBoundingClientRect({
        success: function (data) {
          that.rect = JSON.stringify(data);
          console.log(that.rect, 'rect');
        },
        fail() {
          console.log(`Failed to getBoundingClientRect`);
        }
      });
    },
  }
</script>

展示及打印如下:

cke_3761.png

cke_4645.png

如上所示,这里我们获取到的宽度和高度是我们为这个组件设置的宽度和高度,并不是这个文字的宽度和高度,而且我会发现这个值还会有精度误差,这是正常的。

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

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

相关文章

会议OA项目之会议发布(一)

目录 前言&#xff1a; 会议发布的产品原型图&#xff1a; 1.会议发布 1.1实现的特色功能&#xff1a; 1.2思路&#xff1a; 使用的数据库&#xff1a; 我们要实现多功能下拉框的形式选择可以参考原文档&#xff1a;https://hnzzmsf.github.io/example/example_v4.html#down…

Java-方法的使用

目录 一、方法的概念和使用 1.1方法的含义 1.2 方法的定义 1.3方法调用的执行过程 1.4实参和形参的关系 1.5没有返回值的方法 二、方法重载 2.1方法重载的含义 2.3 方法签名 三、递归 3.1 递归的概念 3.2递归的执行过程 3.3递归练习 一、方法的概念和使用 1.1方法的含义 方…

无符号数和有符号数的“bug”

1. 起因 在实现kmp算法时&#xff0c;出现了诡异的现象&#xff0c;看下面的代码&#xff1a; int KMP (const char *s, const char *t) {int lenS strlen (s);int lenT strlen (t);int next[lenT];get_next (next, t);int i 0;int j 0;while (i < lenS && j …

watch避坑,使用computed进行处理数据

业务场景&#xff1a;在vue中监听el-input 中的字数有没有超过60&#xff0c;如果超过60字时将60后面的字变为 “>>” 符号&#xff0c;以此实现预览苹果手机推送摘要场景。 错误&#xff1a;开始的逻辑是使用watch监听&#xff0c;检查length超过60直接 加上符号&#x…

深度学习:Pytorch最全面学习率调整策略lr_scheduler

深度学习&#xff1a;Pytorch最全面学习率调整策略lr_scheduler lr_scheduler.LambdaLRlr_scheduler.MultiplicativeLRlr_scheduler.StepLRlr_scheduler.MultiStepLRlr_scheduler.ConstantLRlr_scheduler.LinearLRlr_scheduler.ExponentialLRlr_scheduler.PolynomialLRlr_sched…

【六大锁策略-各种锁的对比-Java中的Synchronized锁和ReentrantLock锁的特点分析-以及加锁的合适时机】

系列文章目录 文章目录 系列文章目录前言一、六大"有锁策略"1. 乐观锁——悲观锁2. 轻量级锁——重量级锁3. 自旋锁——挂起等待锁4. 互斥锁——读写锁5. 可重入锁——不可重入锁6. 公平锁——非公平锁 二、Synchronized——ReentrantLockSynchronized的特点&#xf…

【C语言数据结构】模拟·顺序表·总项目实现

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …

leetcode 376. 摆动序列

2023.7.28 本题思路是定义一个 direct变量记录上一次摆动是上坡还是下坡 。 然后在一个for循环中循环判断当前摆动和上一次摆动是否一致&#xff0c;如果不一致则视为一次摆动。 如果前后元素值相等得话&#xff0c;直接continue进入下一次循环。 下面看代码&#xff1a; clas…

leaftjs实现全国温度降水气压风速等值面风场洋流效果

实现内容 数据爬取、地图marker聚合、鼠标移动显示pop&#xff0c;风场&#xff0c;洋流&#xff0c;温度等值面、降水等值面、气压等值面、风速等值面&#xff0c;洋流方向、洋流流速展示、风场方向、风场风速展示&#xff0c;后期扩展小时预报&#xff0c;分钟预报、7天预报…

Matplotlib_概述_绘制图象

⛳绘制基础 在使用 Matplotlib 绘制图形时&#xff0c;其中有两个最为常用的场景。一个是画点&#xff0c;一个是画线。 pyplot 基本方法的使用如下表所示 方法名说明title()设置图表的名称xlabel()设置 x 轴名称ylabel()设置 y 轴名称xticks(x, ticks, rotation)设置 x 轴的…

(el-radio)操作:Element-plus 中 Radio 单选框改成垂直排列的样式操作与使用

Ⅰ、Element-plus 提供的Radio单选框组件与想要目标情况的对比&#xff1a; 1、Element-plus 提供 Radio 组件情况&#xff1a; 其一、Element-ui 自提供的Radio代码情况为(示例的代码)&#xff1a; // Element-plus 自提供的代码&#xff1a; // 此时是使用了 ts 语言环境&a…

4.操作元素属性

4.1操作元素常用属性 ●通过 JS 设置/修改 标签元素属性&#xff0c;比如通过src更换图片 ●最常见的属性比如&#xff1a;href、 title、 src 等 ●语法: 对象.属性 值【示例】 // 1.获取元素 const pic document.querySelector( img ) // 2.操作元素 pic.src ./images/b…

商品库存管理系统设计与实现(Vue+SpringBoot+MySQL)

一、项目背景 当今&#xff0c;我国科技发展日新月异&#xff0c;各类企业迅速崛起&#xff0c;商品类型日益繁多&#xff0c;产品数量急剧增加&#xff0c;企业经营模式越来越多样&#xff0c;信息处理量不断加大&#xff0c;对库存管理提出了更高的要求。通过本系统&#xff…

LayUi 树形组件tree 实现懒加载模式,展开父节点时异步加载子节点数据

如题。 效果图&#xff1a; //lazy属性为true&#xff0c;点开时才加载 引用代码&#xff1a; <link href"~/Content/layui-new/css/layui.css" rel"stylesheet" /><form id"form" class"layui-form" style"margin-to…

数据库索引优化与查询优化——醍醐灌顶

索引优化与查询优化 哪些维度可以进行数据库调优 索引失效、没有充分利用到索引-一索引建立关联查询太多JOIN (设计缺陷或不得已的需求) --SQL优化服务器调优及各个参数设置 (缓冲、线程数等)–调整my.cnf数据过多–分库分表 关于数据库调优的知识点非常分散。不同的 DBMS&a…

YOLOv5:使用7.0版本训练自己的实例分割模型(车辆、行人、路标、车道线等实例分割)

YOLOv5&#xff1a;使用7.0版本训练自己的实例分割模型&#xff08;车辆、行人、路标、车道线等实例分割&#xff09; 前言前提条件相关介绍使用YOLOv5-7.0版本训练自己的实例分割模型YOLOv5项目官方源地址下载yolov5-7.0版源码解压目录结构 准备实例分割数据集在./data目录下&…

Rust vs Go:常用语法对比(七)

题图来自 Go vs Rust: Which will be the top pick in programming?[1] 121. UDP listen and read Listen UDP traffic on port p and read 1024 bytes into buffer b. 听端口p上的UDP流量&#xff0c;并将1024字节读入缓冲区b。 import ( "fmt" "net&qu…

vue+leaflet笔记之地图聚合

vueleaflet笔记之地图聚合 文章目录 vueleaflet笔记之地图聚合开发环境代码简介插件简介与安装使用简介 详细源码(Vue3) 本文介绍了Web端使用Leaflet开发库进行地图聚合查询的一种方法 (底图来源:中科星图)&#xff0c;结合Leaflet.markercluster插件能够快速的实现地图聚合查询…

数据库数据恢复-Syabse数据库存储页底层数据杂乱的数据恢复案例

数据库恢复环境&#xff1a; Sybase版本&#xff1a;SQL Anywhere 8.0。 数据库故障&#xff1a; 数据库所在的设备意外断电后&#xff0c;数据库无法启动。 错误提示&#xff1a; 使用Sybase Central连接后报错&#xff1a; 数据库故障分析&#xff1a; 经过北亚企安数据恢复…

内存函数讲解

&#x1f495;"痛苦难以避免&#xff0c;而磨难可以选择。"-->村上春树&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;数据在内存中的存储 内存函数就是管理内存数据的函数&#xff0c;包含于头文件<string.h>中 1.memcpy函数-->内存…