快应用 通用方法
通用方法,提供给所有组件调用的方法
在组件使用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)
返回元素的大小及其相对于视窗的位置
参数
Object object
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
object.success 回调函数
参数
Object rect
属性 | 类型 | 描述 |
---|---|---|
left | number | 元素的左边界坐标 |
right | number | 元素的右边界坐标 |
top | number | 元素的上边界坐标 |
bottom | number | 元素的下边界坐标 |
width | number | 元素的宽度 |
height | number | 元素的高度 |
toTempFilePath(Object object)
将组件当前的实际绘制区域的内容导出生成图片,保存到临时文件夹。video, camera 组件不支持该接口,组件中存在 video, camera, map, canvas 时,这些组件的绘制区域在生成的图片中将显示黑色。 map 组件只支持导出不含自定义 view(包括 custommarker, control, callout, label )的地图底图
参数
Object object
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
fileType | jpg | png | png | 否 | 目标文件的类型 |
quality | number | 1.0 | 否 | 图片的质量,目前仅对 jpg 有效。取值范围为 (0, 1],不在范围内时当作 1.0 处理。 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
object.fileType 的合法值
值 | 描述 |
---|---|
jpg | jpg 图片 |
png | png 图片 |
object.success 回调函数
参数
Object res
属性 | 类型 | 描述 |
---|---|---|
tempFilePath | string | 临时文件的路径 |