回复
HarmonyOS API：基础组件
joytrian
发布于 2023-3-29 19:53
浏览
0收藏
版本：v3.1 Beta
richtext
更新时间: 2023-02-17 09:19
说明
- 该组件从API version 6开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
- 富文本内容需要写在元素标签内。
富文本组件，用于展示富文本信息。
权限列表
无
属性
仅支持通用属性中的id、style和class属性。
样式
仅支持通用样式中的display和visibility样式。
事件
除支持通用事件外，还支持如下事件：
名称 | 参数 | 描述 |
start | - | 开始加载时触发。 |
complete | - | 加载完成时触发。 |
说明
- 不支持focus、blur、key事件。
- 不支持无障碍事件。
- 包含richtext的页面返回时richtext显示区域不会跟随页面的转场动效。
- richtext内容不建议超过一个屏幕高度，超出部分不会显示。
- 不支持设置宽度，默认撑开全屏。
方法
不支持。
示例
<!-- xxx.hml -->
<div style="flex-direction: column;width: 100%;">
<richtext @start="onLoadStart" @complete="onLoadEnd">{{content}}</richtext>
</div>
// xxx.js
export default {
data: {
content: `
<div class="flex-direction: column; background-color: #ffffff; padding: 30px; margin-bottom: 30px;" style="background-color: #FFFFFF">
<style>h1{color: yellow;}</style>
<p class="item-title">h1</p>
<h1>文本测试(h1测试)</h1>
<p class="item-title">h2</p>
<h2>文本测试(h2测试)</h2>
</div>
`,
},
onLoadStart() {
console.error("start load rich text:" + JSON.stringify())
},
onLoadEnd() {
console.error("end load rich text:" + JSON.stringify())
}
}
search
更新时间: 2023-02-17 09:19
说明
从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
提供搜索框组件，用于提供用户搜索内容的输入区域。
子组件
不支持。
属性
除支持通用属性外，还支持如下属性：
名称 | 类型 | 默认值 | 必填 | 描述 |
icon | string | - | 否 | 搜索图标，默认使用系统搜索图标，图标格式为svg，jpg和png。 |
hint | string | - | 否 | 搜索提示文字。 |
value | string | - | 否 | 搜索框搜索文本值。 |
searchbutton5+ | string | - | 否 | 搜索框末尾搜索按钮文本值。 |
menuoptions5+ | Array<MenuOption> | - | 否 | 设置文本选择弹框点击更多按钮之后显示的菜单项。 |
表1 MenuOption5+
名称 | 类型 | 描述 |
icon | string | 菜单选项中的图标路径。 |
content | string | 菜单选项中的文本内容。 |
样式
除支持通用样式外，还支持如下样式：
名称 | 类型 | 默认值 | 必填 | 描述 |
color | <color> | #e6000000 | 否 | 搜索框的文本颜色。 |
font-size | <length> | 16px | 否 | 搜索框的文本尺寸。 |
allow-scale | boolean | true | 否 | 搜索框的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。 如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 |
placeholder-color | <color> | #99000000 | 否 | 搜索框的提示文本颜色。 |
font-weight | number | string | normal | 否 | 搜索框的字体粗细，见text组件font-weight的样式属性。 |
font-family | string | sans-serif | 否 | 搜索框的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。 |
caret-color6+ | <color> | - | 否 | 设置输入光标的颜色。 |
事件
除支持通用事件外，还支持如下事件：
名称 | 参数 | 描述 |
change | { text:newText } | 输入内容发生变化时触发。 改变value属性值不会触发该回调。 |
submit | { text:submitText } | 点击搜索图标、搜索按钮5+或者按下软键盘搜索按钮时触发。 |
translate5+ | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现翻译按钮，点击翻译按钮之后，触发该回调，返回选中的文本内容。 |
share5+ | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现分享按钮，点击分享按钮之后，触发该回调，返回选中的文本内容。 |
search5+ | { value: selectedText } | 设置此事件后，进行文本选择操作后文本选择弹窗会出现搜索按钮，点击搜索按钮之后，触发该回调，返回选中的文本内容。 |
optionselect5+ | { index:optionIndex, value: selectedText } | 文本选择弹窗中设置menuoptions属性后，用户在文本选择操作后，点击菜单项后触发该回调，返回点击的菜单项序号和选中的文本内容。 |
方法
支持通用方法。
示例
<!-- xxx.hml -->
<div class="container">
<search hint="请输入搜索内容" searchbutton="搜索" @search="search">
</search>
</div>
/* xxx.css */
.container {
display: flex;
justify-content: center;
align-items: center;
}
select
更新时间: 2023-02-17 09:19
下拉选择按钮，可使用下拉菜单展示并选择内容。
说明
从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件
支持<option>。
属性
支持通用属性。
样式
除支持通用样式外，还支持如下样式：
名称 | 类型 | 必填 | 描述 |
font-family | string | 否 | 字体样式列表，用逗号分隔。列表中第一个系统中存在的字体样式或者通过自定义字体指定的字体样式，会被选中作为当前文本的字体样式。 默认值：sans-serif |
事件
除支持通用事件外，还支持如下事件：
名称 | 参数 | 描述 |
change | {newValue: newValue} | 选择下拉选项后触发该事件，返回值为一个对象，其中newValue为选中项option的value值。 |
说明
select组件不支持click事件。
方法
支持通用方法。
示例
<!-- xxx.hml -->
<div class="container">
<select @change="onChange">
<option for="{{ array }}" value="{{ $item.value }}">
{{ $item.name }}
</option>
</select>
</div>
/* xxx.css */
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
// xxx.js
export default {
data: {
array: [
{
"value": "下拉选项0", "name": "选项0"
},
{
"value": "下拉选项1", "name": "选项1"
},
{
"value": "下拉选项2", "name": "选项2"
},
{
"value": "下拉选项3", "name": "选项3"
},
]
},
getData() {
let other = [
{
"value": "下拉选项a", "name": "选项a"
},
{
"value": "下拉选项b", "name": "选项b"
},
{
"value": "下拉选项c", "name": "选项c"
},
{
"value": "下拉选项d", "name": "选项d"
},
]
return other
},
onChange() {
this.array = this.getData()
}
}
赞
收藏
回复
相关推荐
