提交 608f7cf6 编写于 作者: D DCloud_LXH

feat: uni-app-x 事件、dom

上级 8579f60e
......@@ -3,6 +3,7 @@ let utsJson = {};
let utsApiJson = {};
let utsComJson = {};
let utsUnicloudApiJson = {};
let customTypeJson = {};
try {
cssJson = require('../utils/cssJson.json');
} catch (error) {}
......@@ -18,6 +19,9 @@ try {
try {
utsUnicloudApiJson = require('../utils/utsUnicloudApiJson.json');
} catch (error) {}
try {
customTypeJson = require('../utils/customTypeJson.json');
} catch (error) {}
function getRegExp(key) {
......@@ -65,6 +69,14 @@ const getJSON = text => {
};
}
match = text.match(getRegExp('CUSTOMTYPEJSON'));
if (match) {
return {
match,
json: customTypeJson,
};
}
return {
match: null,
json: {},
......
{"Event":{"name":"## Event","description":"","package":"> Package name: io.dcloud.uniapp.runtime","extends":"","param":"\n### 构造函数\n| 参数名 | 参数类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| type | string | 是 | - |\n\n### 参数\n| 参数名 | 参数类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| type | string | 是 | 事件类型 |\n| target | [INode](/uni-app-x/dom/inode.md) | 是 | |\n| currentTarget | [INode](/uni-app-x/dom/inode.md) | 是 | |\n| timeStamp | number | 是 | 事件发生时的时间戳 |\n| stopPropagation | () => void | 是 | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | 阻止当前事件的默认行为 |\n"},"INode":{"name":"## INode","description":"","package":"> Package name: io.dcloud.uniapp.runtime","extends":"","param":"\n### 参数\n| 参数名 | 参数类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| firstChild | INode | 是 | - |\n| lastChild | INode | 是 | - |\n| parentNode | INode | 是 | - |\n| previousSibling | INode | 是 | - |\n| nextSibling | INode | 是 | - |\n| nextElementSibling | INode | 是 | - |\n| childNodes | Array\\<[INode](/uni-app-x/dom/inode.md)\\> | 是 | 获取当前节点包含的子节点的集合 |\n| nodeName | string | 是 | 获取当前节点的节点名称 |\n| dataset | Map\\<string, any\\> | 是 | 获取节点上自定义数据属性(data-*)的集合 |\n| attributes | Map\\<string, any\\> | 是 | 获取节点上所有属性节点的集合 |\n| style | [CSSStyleDeclaration](/uni-app-x/dom/cssstyledeclaration.md) | 是 | CSSStyleDeclaration表示一个CSS 声明块对象,它是一个 CSS 属性键值对的集合,暴露样式信息和各种与样式相关的方法和属性。 |\n| scrollHeight | number | 是 | 表示节点的滚动视图高度 |\n| scrollLeft | number | 是 | 表示该节点横向滚动条距离最左的位移。 |\n| scrollTop | number | 是 | 表示该节点纵向滚动条距离 |\n| scrollWidth | Float | 是 | 表示节点的滚动视图宽度 |\n| getNodeId | () => string | 是 | 获取节点标识。 |\n| appendChild | ([INode](/uni-app-x/dom/inode.md)) => void | 是 | 将一个节点添加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中,那么将会它从原先的位置移动到新的位置。 |\n| insertBefore | ([INode](/uni-app-x/dom/inode.md), [INode](/uni-app-x/dom/inode.md)) => void | 是 | 在参考节点之前插入一个拥有指定父节点的子节点。如果给定的子节点是对文档中现有节点的引用,insertBefore() 会将其从当前位置移动到新位置。 |\n| setAttribute | (string, any?) => void | 是 | 设置指定节点上的某个属性值。如果设置的属性已经存在,则更新该属性值;否则使用指定的名称和值添加一个新的属性。 |\n| getAttribute | (string) => any | 是 | 获取节点指定的属性值,如果指定的属性不存在则返回null。 |\n| hasAttribute | (string) => boolean | 是 | 返回改节点是否包含有指定的属性,属性存在则返回true,否则返回false。 |\n| removeAttribute | (string) => void | 是 | 从节点中删除一个属性,如果指定的属性不存在,则不做任何操作,也不会产生错误。 |\n| getBoundingClientRect | () => [DOMRect](/uni-app-x/dom/domrect.md) | 是 | 获取节点的大小及其相对于窗口的位置信息。 |\n| getDrawableContext | () => [DrawableContext](/uni-app-x/dom/drawablecontext.md) | 是 | 获取组件的绘制对象,仅uvue页面中的 view 组件支持,其它组件不支持则返回null。 |\n| addEventListener | (string, (T) => R) => void | 是 | 将指定的监听器注册到节点对象上,当该对象触发指定的事件时,指定的回调函数就会被执行。 |\n| removeEventListener | (string) => void | 是 | 删除使用 addEventListener 方法添加的事件监听器。 |\n| removeChild | ([INode](/uni-app-x/dom/inode.md)) => [INode](/uni-app-x/dom/inode.md) | 是 | 从节点中删除一个子节点,返回删除的节点。 |\n| remove | () => void | 是 | 把节点对象从它所属的 DOM 树中删除。 |\n| dispatchEvent | (string, [Event](/uni-app-x/common/event.md)) => void | 是 | 向一个指定的事件目标派发一个 Event,并以合适的顺序(同步地)调用此事件的监听器回调函数。 |\n| scrollTo | (number, number) => void | 是 | 使界面滚动到给定元素的指定坐标位置 |\n| scrollBy | (number, number) => void | 是 | 使得元素滚动一段特定距离 |\n"},"CSSStyleDeclaration":{"name":"## CSSStyleDeclaration","description":"\nCSSStyleDeclaration表示一个CSS 声明块对象,它是一个 CSS 属性键值对的集合,暴露样式信息和各种与样式相关的方法和属性。","package":"> Package name: io.dcloud.uniapp.runtime","extends":"","param":"\n### 参数\n| 参数名 | 参数类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| setProperty | (string, any?) => void | 是 | 对CSS指定样式设置一个新值,如有此样式已存在则更新。 |\n| getPropertyValue | (string) => any | 是 | 获取CSS指定的样式值,如果指定的样式不存在则返回null。 |\n"},"DOMRect":{"name":"## DOMRect","description":"\r\n一个 DOMRect 代表一个矩形。","package":"> Package name: io.dcloud.uniapp.runtime","extends":"","param":"\n### 构造函数\n| 参数名 | 参数类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| x | number | 否 | - |\n| y | number | 否 | - |\n| width | number | 否 | - |\n| height | number | 否 | - |\n\n### 参数\n| 参数名 | 参数类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| width | number | 是 | 矩形的宽 |\n| height | number | 是 | 矩形的高 |\n| x | number | 是 | 矩形原点的x坐标 |\n| y | number | 是 | 矩形原点的y坐标 |\n| left | number | 是 | 矩形的左坐标值 |\n| right | number | 是 | 矩形的右坐标值 |\n| top | number | 是 | 矩形的顶坐标值 |\n| bottom | number | 是 | 矩形的底坐标值 |\n"},"DrawableContext":{"name":"## DrawableContext","description":"","package":"> Package name: io.dcloud.uniapp.runtime","extends":"","param":"\n### 参数\n| 参数名 | 参数类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| font | string | 是 | 设置字体大小,默认为`10px` |\n| fillStyle | string | 是 | 设置填充颜色,默认为`#000 (黑色)` |\n| lineCap | string | 是 | 指定如何绘制每一条线条末端的属性,默认为`butt` |\n| lineDashOffset | number | 是 | 设置虚线偏移量 |\n| lineJoin | string | 是 | 设置 2 个长度不为 0 的线条相连部分如何连接在一起的属性,默认值`miter` |\n| lineWidth | number | 是 | 设置线条的宽度,默认为`1px` |\n| strokeStyle | string | 是 | 设置边框的颜色,默认为`#000 (黑色)` |\n| textAlign | string | 是 | 设置文本的对齐方式,默认为`left` |\n| beginPath | () => void | 是 | 创建一个新的空路径 |\n| arc | (number, number, number, number, number, boolean) => void | 是 | 绘制一段弧线 |\n| moveTo | (number, number) => void | 是 | 将一个新的路径的起始点移动到 (x,y) 坐标 |\n| rect | (number, number, number, number) => void | 是 | 创建一个矩形路径 |\n| lineTo | (number, number) => void | 是 | 将路径的最后一个点连接到 (x,y) 坐标 |\n| closePath | () => void | 是 | 闭合路径,将最后一个点与起点连接起来。如果图形已经封闭,或者只有一个点,那么此方法不会产生任何效果。 |\n| stroke | () => void | 是 | 绘制当前或已经存在的路径的边框。 |\n| strokeRect | (number, number, number, number) => void | 是 | 绘制一个矩形框 |\n| strokeText | (string, number, number) => void | 是 | 绘制空心字符 |\n| fill | (string) => void | 是 | 填充当前或已存在的路径 |\n| fillRect | (number, number, number, number) => void | 是 | 绘制一个实心矩形 |\n| fillText | (string, number, number) => void | 是 | 绘制实心字符 |\n| reset | () => void | 是 | 清空绘制数据 |\n| update | () => void | 是 | 将所有绘制内容更新到画布上 |\n| setLineDash | (number\\[\\]) => void | 是 | 设置虚线样式 |\n"},"CustomEvent":{"name":"## CustomEvent","description":"","package":"> Package name: io.dcloud.uniapp.runtime","extends":"```mermaid\nclassDiagram\n\nEvent <|-- CustomEvent : Extend\n```","param":"\n### 构造函数\n| 参数名 | 参数类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| type | string | 是 | - |\n| CustomEventOptions | [CustomEventOptions\\<T\\>](#customeventoptions) | 是 | |\n\n### 参数\n| 参数名 | 参数类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| detail | T | 是 | - |\n| type | string | 是 | 事件类型 |\n| target | [INode](/uni-app-x/dom/inode.md) | 是 | |\n| currentTarget | [INode](/uni-app-x/dom/inode.md) | 是 | |\n| timeStamp | number | 是 | 事件发生时的时间戳 |\n| stopPropagation | () => void | 是 | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | 阻止当前事件的默认行为 |\n"},"CustomEventOptions":{"name":"## CustomEventOptions","description":"","package":"> Package name: io.dcloud.uniapp.runtime","extends":"","param":"\n### 构造函数\n| 参数名 | 参数类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| detail | T | 是 | - |\n\n### 参数\n| 参数名 | 参数类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| detail | T | 是 | - |\n"},"MouseEvent":{"name":"## MouseEvent","description":"","package":"> Package name: io.dcloud.uniapp.runtime","extends":"```mermaid\nclassDiagram\n\nEvent <|-- MouseEvent : Extend\n```","param":"\n### 构造函数\n| 参数名 | 参数类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| type | string | 是 | - |\n| x | number | 是 | - |\n| y | number | 是 | - |\n| clientX | number | 是 | - |\n| clientY | number | 是 | - |\n| pageX | number | 是 | - |\n| pageY | number | 是 | - |\n| screenX | number | 是 | - |\n| screenY | number | 是 | - |\n\n### 参数\n| 参数名 | 参数类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| clientX | number | 是 | 相对于页面可显示区域左边的距离 |\n| clientY | number | 是 | 相对于页面可显示区域顶部的距离 |\n| x | number | 是 | 相对于页面可显示区域左边的距离,同`clientX` |\n| y | number | 是 | 相对于页面可显示区域顶部的距离,同`clientY` |\n| pageX | number | 是 | 相对于文档左边的距离 |\n| pageY | number | 是 | 相对于文档顶部的距离 |\n| screenX | number | 是 | 相对于屏幕左边距离 |\n| screenY | number | 是 | 相对于屏幕顶部的距离 |\n| type | string | 是 | 事件类型 |\n| target | [INode](/uni-app-x/dom/inode.md) | 是 | |\n| currentTarget | [INode](/uni-app-x/dom/inode.md) | 是 | |\n| timeStamp | number | 是 | 事件发生时的时间戳 |\n| stopPropagation | () => void | 是 | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | 阻止当前事件的默认行为 |\n"},"TouchEvent":{"name":"## TouchEvent","description":"","package":"> Package name: io.dcloud.uniapp.runtime","extends":"```mermaid\nclassDiagram\n\nEvent <|-- TouchEvent : Extend\n```","param":"\n### 参数\n| 参数名 | 参数类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| touches | Array\\<[Touch](/uni-app-x/common/touch.md)\\> | 是 | 当前停留在屏幕中的触摸点信息的数组 |\n| changedTouches | Array\\<[Touch](/uni-app-x/common/touch.md)\\> | 是 | 当前变化的触摸点信息的数组 |\n| type | string | 是 | 事件类型 |\n| target | [INode](/uni-app-x/dom/inode.md) | 是 | |\n| currentTarget | [INode](/uni-app-x/dom/inode.md) | 是 | |\n| timeStamp | number | 是 | 事件发生时的时间戳 |\n| stopPropagation | () => void | 是 | 阻止当前事件的进一步传播 |\n| preventDefault | () => void | 是 | 阻止当前事件的默认行为 |\n"},"Touch":{"name":"## Touch","description":"","package":"> Package name: io.dcloud.uniapp.runtime","extends":"","param":"\n### 参数\n| 参数名 | 参数类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| clientX | number | 是 | 相对于页面可显示区域左边的距离 |\n| clientY | number | 是 | 相对于页面可显示区域顶部的距离 |\n| identifier | number | 是 | 当前`Touch`对象的唯一标识符 |\n| pageX | number | 是 | 相对于文档左边的距离 |\n| pageY | number | 是 | 相对于文档顶部的距离 |\n| screenX | number | 是 | 相对于屏幕左边距离 |\n| screenY | number | 是 | 相对于屏幕顶部的距离 |\n| force | number | 否 | 返回当前触摸点按下的压力大小 |\n"},"UniError":{"name":"## UniError","description":"\r\nuni api统一错误信息对象 ","package":"> Package name: io.dcloud.uniapp","extends":"```mermaid\nclassDiagram\n\nError <|-- UniError : Extend\n```","param":"\n### 构造函数\n| 参数名 | 参数类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| errSubject | string | 是 | - |\n| errCode | number | 是 | - |\n| errMsg | string | 是 | - |\n\n### 参数\n| 参数名 | 参数类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| errSubject | string | 是 | 统一错误主题(模块)名称 |\n| errCode | number | 是 | 统一错误码 |\n| errMsg | string | 是 | 统一错误描述信息 |\n| data | any | 否 | 错误信息中包含的数据 |\n| name | string | 是 | - |\n| message | string | 是 | - |\n| cause | [Error](/uni-app-x/common/error.md) | 否 | - |\n"},"UTSJSONObject":{"name":"## UTSJSONObject","description":"","package":"> Package name: ","extends":"","param":"\n### 参数\n| 参数名 | 参数类型 | 必填 | 描述 |\n| :- | :- | :- | :- |\n| getAny | (string) => any | 是 | 获取一个 属性,返回类型是any 或者 null |\n| getBoolean | (string) => boolean | 是 | 获取一个Boolean属性,返回类型是Boolean 或者 null |\n| getNumber | (string) => number | 是 | 获取一个number属性,返回类型是number 或者 null |\n| getString | (string) => string | 是 | 获取一个string属性,返回类型是string 或者 null |\n| getJSON | (string) => UTSJSONObject | 是 | 获取一个UTSJSONObject属性,返回类型是UTSJSONObject 或者 null |\n| getArray | (string) => any\\[\\] | 是 | 获取一个Array属性,返回类型是Array 或者 null |\n"}}
\ No newline at end of file
......@@ -20,6 +20,13 @@
* [基础](/tutorial/vue3-basics.md)
* [组件](/tutorial/vue3-components.md)
* [API](/tutorial/vue3-api.md)
* 通用事件和类型
* [Event](common/event.md)
* [CustomEvent](common/customevent.md)
* [MouseEvent](common/mouseevent.md)
* [TouchEvent](common/touchevent.md)
* [Touch](common/touch.md)
* [UniError](common/unierror.md)
* 组件
* [概述](component/)
* [公共属性和事件](component/common.md)
......@@ -212,9 +219,10 @@
* [lines](css/lines.md)
* UVUE DOM
* [DOM概述](dom/)
* [INode](dom/inode.md)
* [CSSStyleDeclaration](dom/cssstyledeclaration.md)
* [DrawableContext](dom/drawablecontext.md)
* [INode](dom/inode.md)
* [DOMRect](dom/domrect.md)
* [CSSStyleDeclaration](dom/cssstyledeclaration.md)
* [DrawableContext](dom/drawablecontext.md)
* [性能](performance.md)
<!-- * [新建项目]()
* [1. 通过 HBuilderX 可视化界面](quickstart-hx.md)
......
## CustomEvent
<!-- CUSTOMTYPEJSON.CustomEvent.description -->
<!-- CUSTOMTYPEJSON.CustomEvent.package -->
<!-- CUSTOMTYPEJSON.CustomEvent.extends -->
<!-- CUSTOMTYPEJSON.CustomEvent.event -->
## CustomEventOptions
<!-- CUSTOMTYPEJSON.CustomEventOptions.description -->
<!-- CUSTOMTYPEJSON.CustomEventOptions.package -->
<!-- CUSTOMTYPEJSON.CustomEventOptions.extends -->
<!-- CUSTOMTYPEJSON.CustomEventOptions.event -->
## Error
<!-- CUSTOMTYPEJSON.Error.description -->
<!-- CUSTOMTYPEJSON.Error.package -->
<!-- CUSTOMTYPEJSON.Error.extends -->
<!-- CUSTOMTYPEJSON.Error.event -->
## Event
<!-- CUSTOMTYPEJSON.Event.description -->
<!-- CUSTOMTYPEJSON.Event.package -->
<!-- CUSTOMTYPEJSON.Event.extends -->
<!-- CUSTOMTYPEJSON.Event.event -->
## MouseEvent
<!-- CUSTOMTYPEJSON.MouseEvent.description -->
<!-- CUSTOMTYPEJSON.MouseEvent.package -->
<!-- CUSTOMTYPEJSON.MouseEvent.extends -->
<!-- CUSTOMTYPEJSON.MouseEvent.event -->
## Touch
<!-- CUSTOMTYPEJSON.Touch.description -->
<!-- CUSTOMTYPEJSON.Touch.package -->
<!-- CUSTOMTYPEJSON.Touch.extends -->
<!-- CUSTOMTYPEJSON.Touch.event -->
## TouchEvent
<!-- CUSTOMTYPEJSON.TouchEvent.description -->
<!-- CUSTOMTYPEJSON.TouchEvent.package -->
<!-- CUSTOMTYPEJSON.TouchEvent.extends -->
<!-- CUSTOMTYPEJSON.TouchEvent.event -->
## UniError
<!-- CUSTOMTYPEJSON.UniError.description -->
<!-- CUSTOMTYPEJSON.UniError.package -->
<!-- CUSTOMTYPEJSON.UniError.extends -->
<!-- CUSTOMTYPEJSON.UniError.event -->
# CSSStyleDeclaration
CSSStyleDeclaration表示一个CSS 声明块对象,它是一个 CSS 属性键值对的集合。它暴露了样式信息和各种与样式相关的方法和属性。
# CSSStyleDeclaration
| 方法 | 说明 |
|-------------------------------------- |-------------------------- |
| [setProperty](#setProperty) | 设置CSS的某个样式值 |
| [getPropertyValue](#getPropertyValue) | 获取CSS的某个样式值 |
## setProperty(name, value)@setProperty
<!-- CUSTOMTYPEJSON.CSSStyleDeclaration.description -->
<!-- CUSTOMTYPEJSON.CSSStyleDeclaration.package -->
<!-- CUSTOMTYPEJSON.CSSStyleDeclaration.extends -->
<!-- CUSTOMTYPEJSON.CSSStyleDeclaration.param -->
对CSS指定样式设置一个新值。
## setProperty(name, value)@setProperty
```ts
CSSStyleDeclaration.setProperty(name:string, value:any):void
```
**参数说明**
| 参数 | 类型 | 说明 |
|-------|-------- |------ |
| name | string | CSS样式名称|
| value | any | CSS样式值 |
**返回值**
## getPropertyValue(property)@getPropertyValue
获取CSS指定的样式值,如果指定的样式不存在则返回null。
```ts
```ts
CSSStyleDeclaration.getPropertyValue(property:string):any?
```
**参数说明**
| 参数 | 类型 | 说明 |
|---------------|-------- |------ |
| property | string | CSS样式名称|
**返回值**
| 类型 | 说明 |
|------ |---------- |
| any | CSS样式值,可能为null |
## 示例
```html
<template>
......
## DrawableContext
## DrawableContext
<!-- CUSTOMTYPEJSON.DrawableContext.description -->
<!-- CUSTOMTYPEJSON.DrawableContext.package -->
<!-- CUSTOMTYPEJSON.DrawableContext.extends -->
<!-- CUSTOMTYPEJSON.DrawableContext.param -->
## INode
| 属性 | 说明 |
|-------------------------------------- |-------------------------- |
| [style](#style) | 组件样式列表对象,参考[CSSStyleDeclaration](cssstyledeclaration.md)|
| 方法 | 说明 |
|-------------------------------------- |-------------------------- |
| [setAttribute](#setAttribute) | 设置组件的某个属性值 |
| [getAttribute](#getAttribute) | 获取组件指定的属性值 |
| [getDrawableContext](#getDrawableContext) | 获取组件的绘制对象 |
### style@style
组件的CSS样式列表对象,只读属性。可以通过其 setProperty 方法更新组件的样式。[详见](cssstyledeclaration.md)
```ts
node.style;
```
<!-- CUSTOMTYPEJSON.INode.description -->
<!-- CUSTOMTYPEJSON.INode.package -->
### setAttribute(name, value)@setAttribute
设置指定组件上的某个属性值。如果设置的属性已经存在,则更新该属性值;否则使用指定的名称和值添加一个新的属性。
```ts
INode.setAttribute(name:string, value:any|null):void
```
**参数说明**
| 参数 | 类型 | 说明 |
|-------|-------- |------ |
| name | string | 属性名称 |
| value | any | 属性的值 |
**返回值**
### getAttribute(attributeName)@getAttribute
获取元素指定的属性值,如果指定的属性不存在则返回null。
```ts
INode.getAttribute(attributeName:string):any?
```
**参数说明**
| 参数 | 类型 | 说明 |
|---------------|-------- |------ |
| attributeName | string | 属性名称 |
**返回值**
| 类型 | 说明 |
|------ |---------- |
| Any? | 属性值,可为null |
### getDrawableContext()@getDrawableContext
获取组件的绘制对象,仅uvue页面中的 `view` 组件支持,其它组件不支持则返回null。
```ts
INode.getDrawableContext():DrawableContext|null
```
**返回值**
| 类型 | 说明 |
|------ |---------- |
| [DrawableContext](drawablecontext.md) | 绘制对象,可能为null |
<!-- CUSTOMTYPEJSON.INode.extends -->
<!-- CUSTOMTYPEJSON.INode.param -->
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册