属性
除了支持 通用属性以外，还支持如下属性。
名称 | 类型 | 默认值 | 是否必填 | 描述 |
|---|---|---|---|---|
value | string | - | 否 | 添加桌面图标按钮组件的文本。 1106版本该属性已废弃，设置无效。 |
add-type(1106+) | number | 0 | 否 | 添加桌面文案预置类型，仅在中国大陆支持。 add-type设置值对应文案如下：
|
样式
除了支持 通用样式 以外，还支持如下样式。
- 1103版本开始，不再支持background和background-image样式。
- 1105版本开始，不再支持padding、padding-left、padding-right、padding-top和padding-bottom样式。
- 1119不再支持border、border-[left|top|right|bottom]、border-style、border-width、border-[left|top|right|bottom]-width、border-color、border-[left|top|right|bottom]-color、border-[top|bottom]-[left|right]-radius。
名称 | 类型 | 默认值 | 是否必填 | 描述 |
|---|---|---|---|---|
color(1103+) | color | #FFFFFF | 否 | 按钮初始文案颜色。当background-color和color值过于相似时，这两个字段设置的值无效。 说明： 当设置成rgba或者hsla类型颜色值时，透明度设置小于0.5时会默认按0.5处理。 |
background-color(1103+) | color | #0A59F7 | 否 | 按钮初始背景颜色。当background-color和color值过于相似时，这两个字段设置的值无效。 说明： 当设置成rgba或者hsla类型颜色值时，透明度设置小于0.5时会默认按0.5处理。 |
opacity(1103+) | float | 1.0 | 否 | 组件透明度。取值范围：0.5~1.0
注意： 当设置的值小于0.5时，默认按0.5处理。 |
font-size | number | 37.5px | 否 | 文本尺寸。 取值范围：20~112.5px |
width | length | percentage | 128px | 否 | 组件宽度。 |
height | length | 70px | 否 | 组件高度，不支持设置百分比。 取值范围：不大于180px（设置超过180px则按照180px处理） |
- 该组件必须完整对用户可见，不可被任何元素覆盖或遮挡（含透明元素），否则会影响您的计费。
- 该组件必须完全在屏幕范围内。
事件
除了支持 通用事件 以外，还支持如下事件。
名称 | 参数 | 描述 |
|---|---|---|
click | {eventStatusCode: eventStatusCodeValue, eventMessage: eventMessageValue} | 组件被点击时触发。
说明： 当设备是Android 8.0或以下版本时，无论是否添加桌面图标成功，状态码都返回0，状态信息都返回createShortCut success. |
示例代码
<template>
<!-- Only one root node is allowed in template. -->
<div class="container">
<shortcut-button class="shortcut" add-type="1" onclick="click()"></shortcut-button>
</div>
</template>
<style>
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
font-size: 100px;
}
.shortcut {
margin-top: 40px;
background-color: rgba(219, 22, 22, 1);
color: rgb(22, 203, 219);
font-size: 40px;
width: 300px;
height: 70px;
border-radius: 220px;
align-self: center;
text-align: center;
opacity: 0.4;
}
</style>
<script>
import prompt from '@system.prompt'
import shortcut from '@system.shortcut'
module.exports = {
data: {
componentData: {},
},
onInit() {
this.$page.setTitleBar({
text: 'menu',
textColor: '#ffffff',
backgroundColor: '#007DFF',
backgroundOpacity: 0.5,
menu: true
});
},
click(event) {
prompt.showToast({
message: event.eventStatusCode
})
}
}
</script>