教程 框架 组件 接口 工具 其他

通用方法

通用方法,提供给所有组件调用的方法

在组件使用id标记 id 属性后,开发者可通过this.$element('idName')获取 dom 节点,再调用以下列举的通用方法

id属性赋值可以查看此文档入门

this.$element可以查看此文档入门

本节介绍的通用方法列表有:

示例代码

<template>
  <div>
      <div id="box1" class="box-normal"></div>
      <div id="box2" class="box-normal"></div>
  </div>
</template>
<script>
    export default {
        onShow(){
            this.$element('box1').getBoundingClientRect({
                success: function (data) {
                    const { top, bottom, left, right, width, height } = data;
                    prompt.showToast({
                        message: `getBoundingClientRect结果: width:${width}, height:${height},
                         top:${top}, bottom:${bottom}, left:${left}, right:${right}`
                    })
                },
                fail: (errorData, errorCode) => {
                    prompt.showToast({
                        message: `错误原因:${JSON.stringify(errorData)}, 错误代码:${errorCode}`
                    })
                },
                complete: function () {
                    console.info('complete')
                }
            })
        }
    }
</script>

以下是所有支持的通用方法

getBoundingClientRect(Object object) 1070+

返回元素的大小及其相对于视窗的位置

参数

Object object

属性类型默认值必填描述
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

object.success 回调函数

参数

Object rect

属性类型描述
leftnumber元素的左边界坐标
rightnumber元素的右边界坐标
topnumber元素的上边界坐标
bottomnumber元素的下边界坐标
widthnumber元素的宽度
heightnumber元素的高度

toTempFilePath(Object object) 1070+

将组件当前的实际绘制区域的内容导出生成图片,保存到临时文件夹。video, camera 组件不支持该接口,组件中存在 video, camera, map, canvas 时,这些组件的绘制区域在生成的图片中将显示黑色。 map 组件只支持导出不含自定义 view(包括 custommarker, control, callout, label )的地图底图

参数

Object object

属性类型默认值必填描述
fileTypejpg | pngpng目标文件的类型
qualitynumber1.0图片的质量,目前仅对 jpg 有效。取值范围为 (0, 1],不在范围内时当作 1.0 处理。
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

object.fileType 的合法值

描述
jpgjpg 图片
pngpng 图片

object.success 回调函数

参数

Object res

属性类型描述
tempFilePathstring临时文件的路径

focus(Object object) 1080+

使组件获得或者失去焦点的方法

注:

  1. 在 1080 以前的版本,仅 input 和 textarea 组件支持。在 1080 开始,快应用引擎增加了所有组件的focus支持

  2. 欲查看或确认组件聚焦效果,建议为聚焦元素加上:focus 伪类,可参考MDN 文档学习

参数

属性类型默认值必填描述
focusbooleantrue使组件获得或者失去焦点,聚焦时可触发 focus 伪类效果

示例代码

<script>
    this.$element('box1').focus();  // 聚焦效果
    this.$element('box2').focus({focus:true});  // 聚焦效果
    this.$element('box3').focus({focus:false});  // 失焦效果
</script>

条匹配 "" 的结果

    没有搜索到与 "" 相关的内容