Skip to content

unidocs-zh
unidocs-zh

DCloud / unidocs-zh

通知 3598
Star 108
Fork 921
unidocs-zh
unidocs-zh
提交 ab8e0369 编写于 作者: DCloud-yyl's avatar DCloud-yyl
浏览文件
操作

Update README.md

上级 ec9c030f
隐藏空白更改
内联 并排
Showing with 63 addition and 64 deletion
docs/uni-app-x/dom/README.md
浏览文件 @ ab8e0369
...@@ -43,30 +43,26 @@ app-uvue 页面中可以为页面元素节点设置 id 属性，然后通过 [un ...@@ -43,30 +43,26 @@ app-uvue 页面中可以为页面元素节点设置 id 属性，然后通过 [un
```vue ```vue
<!-- id 属性值为 myView，后续可以通过此值查找 --> <!-- id 属性值为 myView，后续可以通过此值查找 -->
<view id="myView" class="container"> <view id="myView" class="container">
<text>Hello World</text> <text>Hello World</text>
</view> </view>
``` ```
在页面`onReady` 后（太早组件可能没有创建），通过 `uni.getElementById` 获取。如果长期使用，可以保存在vue的 data 中。 在页面`onReady` 后（太早组件可能没有创建），通过 `uni.getElementById` 获取。如果长期使用，可以保存在vue的 data 中。
```ts ```ts
export default { export default {
data() { data() {
return { return {
myView: null as Element|null //保存后可通过this.myView访问 color: 'red',
} myView: null as Element | null
}, }
onReady() { },
// 获取组件对象并保存在 this.myView 中 onReady() {
this.myView = uni.getElementById('myView'); // 获取组件对象并保存在 this.myView 中
}, this.myView = uni.getElementById('myView');
},
} }
``` ```
通过Element对象的 style 属性更新组件的样式：
```ts
this.myView?.style?.setProperty('background-color', 'red');
```
### 通过this.$refs获取DOM元素 ### 通过this.$refs获取DOM元素
app-uvue页面中可以通过 vue 框架中的组件实例对象 [this.$refs](https://uniapp.dcloud.net.cn/tutorial/vue3-api.html#%E5%AE%9E%E4%BE%8B-property) 获取 DOM 元素对象。 app-uvue页面中可以通过 vue 框架中的组件实例对象 [this.$refs](https://uniapp.dcloud.net.cn/tutorial/vue3-api.html#%E5%AE%9E%E4%BE%8B-property) 获取 DOM 元素对象。
...@@ -74,21 +70,23 @@ app-uvue页面中可以通过 vue 框架中的组件实例对象 [this.$refs](ht ...@@ -74,21 +70,23 @@ app-uvue页面中可以通过 vue 框架中的组件实例对象 [this.$refs](ht
```vue ```vue
<!-- ref 属性值为 myView，后续可以通过此值查找 --> <!-- ref 属性值为 myView，后续可以通过此值查找 -->
<view ref="myView" class="container"> <view ref="myView" class="container">
<text>Hello World</text>
</view> </view>
``` ```
在页面`onReady` 后（太早组件可能没有创建），通过 `this.$refs` 获取。如果长期使用，可以保存在vue的 data 中。 在页面`onReady` 后（太早组件可能没有创建），通过 `this.$refs` 获取。如果长期使用，可以保存在vue的 data 中。
```ts ```ts
export default { export default {
data() { data() {
return { return {
myView: null as Element|null //保存后可通过this.myView访问 color: 'red',
} myView: null as Element | null
}, }
onReady() { },
// 获取组件对象并保存在 this.myView 中 onReady() {
this.myView = this.$refs['myView'] as Element; //需要使用 as 转换 // 获取组件对象并保存在 this.myView 中
}, this.myView = this.$refs['myView'] as Element; //需要使用 as 转换
},
} }
``` ```
...@@ -104,53 +102,54 @@ this.myView?.style?.setProperty('background-color', 'red'); ...@@ -104,53 +102,54 @@ this.myView?.style?.setProperty('background-color', 'red');
以下是完整的操作示例： 以下是完整的操作示例：
```vue ```vue
<template> <template>
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view style="flex:1;align-items: center;"> <scroll-view style="flex:1;align-items: center;">
<!-- #endif --> <!-- #endif -->
<view id="myView" ref="myView" class="container"> <view id="myView" ref="myView" class="container">
<text>Hello World</text> <text>Hello World</text>
</view> </view>
<button @tap="updateElement">操作Element</button> <button @tap="updateElement">操作Element</button>
<!-- #ifdef APP --> <!-- #ifdef APP -->
</scroll-view> </scroll-view>
<!-- #endif --> <!-- #endif -->
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
color: 'red', color: 'red',
myView: null as Element|null myView: null as Element | null
} }
}, },
onLoad() { onLoad() {
}, },
onReady() { onReady() {
this.myView = uni.getElementById('myView'); //通过uni.getElementById获取 this.myView = uni.getElementById('myView'); //通过uni.getElementById获取
//this.myView = this.$refs['myView'] as Element; //通过this.$refs获取，需要使用 as 转换 //this.myView = this.$refs['myView'] as Element; //通过this.$refs获取，需要使用 as 转换
}, },
methods: { methods: {
updateElement() { updateElement() {
this.color = 'red'==this.color?'blue':'red'; this.color = 'red' == this.color ? 'blue' : 'red';
this.myView?.style?.setProperty('background-color', this.color); this.myView?.style?.setProperty('background-color', this.color);
} }
}, },
} }
</script> </script>
<style> <style>
.container { .container {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: aquamarine; background-color: aquamarine;
width: 100%; width: 100%;
height: 200px; height: 200px;
} }
</style> </style>
``` ```
以上例子仅为演示DOM API的使用，实际上点击按钮修改背景色这种简单场景，使用数据绑定更简单，class绑定到一个data上，动态修改data即可。 >以上例子仅为演示DOM API的使用，实际上点击按钮修改背景色这种简单场景，使用数据绑定更简单，class绑定到一个data上，动态修改data即可。
## 通过DrawableContext绘制View ## 通过DrawableContext绘制View
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或