Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
4aade6dd
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3217
Star
106
Fork
816
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
95
列表
看板
标记
里程碑
合并请求
70
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
95
Issue
95
列表
看板
标记
里程碑
合并请求
70
合并请求
70
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
4aade6dd
编写于
1年前
作者:
DCloud-yyl
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
add dom files for uni-app x
上级
9591e952
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
112 addition
and
4 deletion
+112
-4
docs/uni-app-x/dom.md
docs/uni-app-x/dom.md
+30
-4
docs/uni-app-x/dom/cssstyle.md
docs/uni-app-x/dom/cssstyle.md
+2
-0
docs/uni-app-x/dom/drawablecontext.md
docs/uni-app-x/dom/drawablecontext.md
+2
-0
docs/uni-app-x/dom/inode.md
docs/uni-app-x/dom/inode.md
+78
-0
未找到文件。
docs/uni-app-x/dom.md
浏览文件 @
4aade6dd
...
...
@@ -11,8 +11,34 @@ UVEU页面在渲染过程中会生成对应的文档对象模型(DOM),DOM
## 获取DOM元素对象@getDomNode
在UVUE页面中可以通过 vue 框架中的组件实例对象
[
$refs
](
https://uniapp.dcloud.net.cn/tutorial/vue3-api.html#%E5%AE%9E%E4%BE%8B-property
)
获取 DOM 元素对象。
以下是完整的操作示例:
首先需要为组件设置 ref 属性值:
```
vue
<!-- ref 属性值为 myNode,后续可以通过此值查找 -->
<view
ref=
"myNode"
class=
"container"
>
</view>
```
在页面生命周期
`onReady`
中通过 $refs 获取,如果长期使用,建议保存在vue的 data 中:
```
ts
export
default
{
data
()
{
return
{
myNode
:
null
as
INode
|
null
//保存后可通过this.myNode访问
}
},
onReady
()
{
// 获取组件对象并保存在 this.myNode 中
this
.
myNode
=
$refs
[
'
myNode
'
]
as
INode
;
//需要使用 as 转换
},
}
```
通过INode对象的 style 属性更新组件的样式:
```
ts
this
.
myNode
?.
style
?.
setProperty
(
'
background-color
'
,
'
red
'
);
```
以下是完整的操作示例:
```
vue
<
template
>
<!-- #ifdef APP -->
<scroll-view
style=
"flex:1;align-items: center;"
>
...
...
@@ -62,7 +88,7 @@ UVEU页面在渲染过程中会生成对应的文档对象模型(DOM),DOM
## DOM接口
-
INode
-
CSSStyleDeclaration
-
DrawableContext
-
[
INode
](
dom/inode.md
)
-
[
CSSStyleDeclaration
](
dom/cssstyle.md
)
-
[
DrawableContext
](
dom/drawablecontext.md
)
This diff is collapsed.
Click to expand it.
docs/uni-app-x/dom/cssstyle.md
0 → 100644
浏览文件 @
4aade6dd
## CSSStyleDeclaration
This diff is collapsed.
Click to expand it.
docs/uni-app-x/dom/drawablecontext.md
0 → 100644
浏览文件 @
4aade6dd
## DrawableContext
This diff is collapsed.
Click to expand it.
docs/uni-app-x/dom/inode.md
0 → 100644
浏览文件 @
4aade6dd
## INode
| 属性 | 说明 |
|-------------------------------------- |-------------------------- |
|
[
style
](
#style
)
| 组件样式列表对象,参考
[
CSSStyleDeclaration
](
cssstyle.md
)
|
| 方法 | 说明 |
|-------------------------------------- |-------------------------- |
|
[
setAttribute
](
#setAttribute
)
| 设置组件的某个属性值 |
|
[
getAttribute
](
#getAttribute
)
| 获取组件指定的属性值 |
|
[
getDrawableContext
](
#getAttribute
)
| 获取组件的绘制对象 |
### style@style
组件的CSS样式列表对象,只读属性。可以通过其 setProperty 方法更新组件的样式。
```
ts
node
.
style
;
```
### setAttribute(name, value)@setAttribute
设置指定组件上的某个属性值。如果设置的属性已经存在,则更新该属性值;否则使用指定的名称和值添加一个新的属性。
```
ts
node
.
setAttribute
(
"
name
"
,
"
helloButton
"
);
```
**参数说明**
| 参数 | 类型 | 说明 |
|-------|-------- |------ |
| name | string | 属性名称 |
| value | Any | 属性的值 |
**返回值**
无
### getAttribute(attributeName)@getAttribute
获取元素指定的属性值,如果指定的属性不存在则返回null。
```
ts
var
attribute
=
node
.
getAttribute
(
attributeName
);
```
**参数说明**
| 参数 | 类型 | 说明 |
|---------------|-------- |------ |
| attributeName | string | 属性名称 |
**返回值**
| 类型 | 说明 |
|------ |---------- |
| Any? | 属性值,可为null |
### getDrawableContext()@getDrawableContext
获取组件的绘制对象,仅uvue页面中的
`view`
组件支持,其它组件不支持则返回null。
```
ts
var
drawContext
=
node
.
getDrawableContext
();
```
**返回值**
| 类型 | 说明 |
|------ |---------- |
|
[
DrawableContext
](
drawablecontext.md
)
? | 绘制对象,可为null |
This diff is collapsed.
Click to expand it.
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录