Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
e362c945
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3038
Star
102
Fork
763
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
87
列表
看板
标记
里程碑
合并请求
59
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
87
Issue
87
列表
看板
标记
里程碑
合并请求
59
合并请求
59
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
e362c945
编写于
1月 13, 2023
作者:
杜庆泉
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
uts 组件文档更新
上级
7c9f29a8
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
93 addition
and
1 deletion
+93
-1
docs/plugin/uts-component.md
docs/plugin/uts-component.md
+93
-1
未找到文件。
docs/plugin/uts-component.md
浏览文件 @
e362c945
...
...
@@ -377,9 +377,19 @@ NVMeasure 用于告诉排版系统,组件自身需要的宽高,具体的调
|:------- |:-------- |:-------- |:--- |:--- |
|$el |对象 |当前View实例对象 |全部平台 |开发者在NVLoad返回的对象类型|
|$androidContext|对象 |当前组件上下文 |仅android |android平台对应Context对象|
|emit("event"
) |函数 |发送已注册的事件 |全部平台 |
|
|emit("event"
,Any)|函数 |发送已注册的事件 |全部平台 |emit(事件名称-必选,事件参数可选)
|
#### 组件的通用事件
对于UTS组件来说,除了通过 emit/emits 函数来自定义事件外,UTS组件还内置了下列标准事件,组件的使用者无需实现,直接使用
|事件名称 |简介
|:------- |:--------
|click |组件点击事件响应
|longpress |组件长按事件响应
## 简单View的示例
...
...
@@ -913,6 +923,88 @@ UTS组件建议使用远程依赖的方式集成,如果需要以AAR的形式
在当前例子中,因为配置了额外的第三方依赖,需要自定义基座方能使用
## UTS开发容器组件
## 简介
组件一般有两种场景,第一种是: 单标签组件
```
<uts-view style="xxxx"/>
```
我们上面介绍的
`uts-hello-view`
或者
`uts-animation-view`
都是这种类型
第二种是 作为容器使用:
```
<uts-view >
<text> 文字子组件</text>
<image src="https://xxx">
<uts-view >
```
## 声明
UTS组件作为容器组件与普通View组件遵循完全相同的规范,
唯一的区别在于 当组件布局中包含
<solt>
标签时,编译器会自动将其转换为容器组件
```
ts
<
template
>
<
view
class
=
"
defaultStyles
"
>
<
solt
/>
<
/view
>
<
/template
>
<
script
lang
=
"
uts
"
>
import
LinearLayout
from
'
android.widget.LinearLayout
'
//原生提供以下属性或方法的实现
export
default
{
name
:
"
uts-hello-container
"
,
NVLoad
():
LinearLayout
{
let
contentLayout
=
new
LinearLayout
(
$androidContext
)
return
contentLayout
}
}
<
/script
>
<
style
>
/* 定义默认样式值, 组件使用者没有配置时使用 */
.
defaultStyles
{
width
:
750
rpx
;
height
:
240
rpx
;
background
-
color
:
blue
;
}
<
/style
>
```
如上,我们即可到了一个最简的UTS容器组件
## 使用容器组件
UTS容器组件的使用与Vue等常见的前端容器组件一致。唯一要注意的是,目前UTS容器组件还不支持 具名插槽。
如下是一个容器组件的使用示例
```
js
<
template
>
<
uts
-
hello
-
container
>
<
text
>
UTS
contianer组件
<
/text
>
<
button
text
=
"
点击按钮内容
"
style
=
"
width:375px;height: 375px;background-color: aqua;
"
><
/button
>
<
/uts-hello-container
>
<
/template
>
<
script
>
<
/script
>
<
style
>
<
/style>
```
## 快速体验
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录