• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 动态创建组件
2
3提供在页面中动态添加组件，并为动态添加的组件设置属性与样式的能力。
4
5>  **说明：**
6>
7> - 从API version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9
10## createElement
11
12createElement(tag: string): Element
13
14创建一个组件对象。
15
16**参数：**
17
18| 参数名     | 类型       | 必填   | 说明      |
19| ------- | ------------ | ---- | ------- |
20| tag | string | 是    | 组件名称。 |
21
22**返回值：**
23
24| 类型        | 说明            |
25| ----------- | ------------- |
26| Element | 对应tag名称的组件对象。 |
27
28```js
29let newImage = dom.createElement('image')
30```
31
32
33## setAttribute
34
35setAttribute(name: string, value: string): void
36
37动态设置组件的属性。
38
39**参数：**
40
41| 参数名     | 类型       | 必填   | 说明      |
42| ------- | ------------ | ---- | ------- |
43| name | string | 是    | 属性名称。 |
44| value | string | 是    | 属性值。 |
45
46```js
47newImage.setAttribute('src', 'common/testImage.jpg')
48```
49
50
51## setStyle
52
53setStyle(name: string, value: string): boolean
54
55动态设置组件的样式。
56
57**参数：**
58
59| 参数名     | 类型       | 必填   | 说明      |
60| ------- | ------------ | ---- | ------- |
61| name | string |  是    | 样式名称。 |
62| value | string |  是    | 样式值。 |
63
64**返回值：**
65
66| 类型        | 说明            |
67| ----------- | ------------- |
68| boolean | 设置成功时返回true，失败时返回false。 |
69
70```js
71newImage.setStyle('width', '120px')
72```
73
74
75## addChild
76
77addChild(child: Element): void
78
79将动态创建的组件添加到父组件当中。
80
81**参数：**
82
83| 参数名     | 类型       | 必填   | 说明    |
84| ------- | ------------ | ---- | ------- |
85| child | Element | 是    | 组件对象。 |
86
87```js
88newDiv.addChild(newImage)
89```
90
91
92## 示例
93
94```html
95<!-- xxx.hml -->
96<div class="container">
97  <div id="parentDiv" class="parent"></div>
98  <button onclick="appendDiv" class="btn">动态创建div</button>
99  <button onclick="appendImage" class="btn">动态创建image到创建的div中</button>
100</div>
101```
102
103```css
104/* xxx.css */
105.container {
106  flex-direction: column;
107  align-items: center;
108  width: 100%;
109}
110
111.parent {
112  flex-direction: column;
113}
114
115.btn {
116  width: 70%;
117  height: 60px;
118  margin: 15px;
119}
120```
121
122```js
123// xxx.js
124let newDiv = null
125let newImage = null
126
127export default {
128  appendDiv() {
129    let parent = this.$element('parentDiv')
130    newDiv = dom.createElement('div')
131    newDiv.setStyle('width', '150px')
132    newDiv.setStyle('height', '150px')
133    newDiv.setStyle('backgroundColor', '#AEEEEE')
134    newDiv.setStyle('marginTop', '15px')
135    parent.addChild(newDiv)
136  },
137  appendImage() {
138    newImage = dom.createElement('image')
139    newImage.setAttribute('src', 'common/testImage.jpg')
140    newImage.setStyle('width', '120px')
141    newImage.setStyle('height', '120px')
142    newDiv.addChild(newImage)
143  }
144}
145```