Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
程序yang
unidocs-zh
提交
e362c945
U
unidocs-zh
项目概览
程序yang
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录