合作咨询
我们的专家服务团队将竭诚为您提供专业的合作咨询服务
使用该组件时，务必说明用户点击组件后将添加桌面图标，组件的使用不能影响用户体验。
shortcut-button（1083+）
本文导读
概述
添加桌面图标按钮组件。
注意
使用限制
限制条件 | 说明 |
|---|---|
适用终端 | 手机、平板、车机 |
适用区域 | 全球 |
子组件
不支持。
属性
除了支持 通用属性以外，还支持如下属性。
名称 | 类型 | 默认值 | 是否必填 | 描述 |
|---|---|---|---|---|
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>
版本更新说明
版本 | 发布日期 | 描述 |
|---|---|---|
1106 | 2023-06-19 | 新增add-type属性。 |
1105 | 2023-04-25 |
|
1103 | 2022-12-26 |
|
1083 | 2022-03-21 | 第一次正式发布。 |