通用方法

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

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

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

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

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

• getBoundingClientRect(1070+)
• toTempFilePath(1070+)
• focus(1080+)

示例代码

<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

object.success 回调函数

参数

Object rect

toTempFilePath(Object object) 1070+

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

参数

Object object

object.fileType 的合法值

object.success 回调函数

参数

Object res

focus(Object object) 1080+

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

注：

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

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

参数

示例代码

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