HIPS-UNI-UI

# Actionsheet 选项弹出

# 使用指南

import Actionsheet from '@hips/uni-ui/lib/actionsheet';

export default {
  components: {
    'hips-actionsheet': Actionsheet,
  },
};
1
2
3
4
5
6
7

# 跨平台支持

微信小程序 支付宝小程序 钉钉小程序 百度小程序 头条小程序 QQ 小程序
✔️ - - - - -

# 代码演示

# 基础用法

<hips-actionsheet
  v-model="show"
  title="普通用法"
  sub-title="这是一个普通的选项弹出。"
  :buttons="buttons"
  @click="_handleCommon"
  @click-danger="_handleDanger"
/>
1
2
3
4
5
6
7
8
export default {
  data() {
    return {
      show: false,
      buttons: [
        {
          text: 'Forward',
          closeAfterClick: true,
        },
        {
          text: 'Share',
        },
        {
          text: 'Delete',
          type: 'danger',
        },
      ],
    };
  },
  methods: {
    _handleCommon(index) {
      console.log('click common button at index ', index);
    },
    _handleDanger(index) {
      console.log('click danger button at index ', index);
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 添加圆角

<hips-actionsheet
  v-model="show"
  title="普通用法"
  sub-title="这是一个普通的选项弹出。"
  round-corner
  :buttons="buttons"
  @click="_handleCommon"
  @click-danger="_handleDanger"
/>
1
2
3
4
5
6
7
8
9

# 显示取消按钮

<hips-actionsheet
  v-model="show"
  title="普通用法"
  sub-title="带有取消按钮"
  cancel-text="取消"
  :buttons="buttons"
  @click="_handleCommon"
  @click-danger="_handleDanger"
  @cancel="_handleCancel"
/>
1
2
3
4
5
6
7
8
9
10
export default {
  data() {
    return {
      show: false,
      buttons: [
        {
          text: 'Forward',
          closeAfterClick: true,
        },
        {
          text: 'Share',
        },
        {
          text: 'Delete',
          type: 'danger',
        },
      ],
    };
  },
  methods: {
    _handleCommon(index) {
      console.log('click common button at index ', index);
    },
    _handleDanger(index) {
      console.log('click danger button at index ', index);
    },
    _handleCancel() {
      console.log('click cancel button');
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 方法调用

<hips-cell title="显示Actionsheet" @click="$refs.hipsActionsheet.open()" />
<hips-actionsheet
  ref="hipsActionsheet"
  title="测试"
  sub-title="来测试"
  round-corner
  cancel-text="取消"
  :buttons="buttons"
  @click="_handleCommon"
  @click-danger="_handleDanger"
  @cancel="_handleCancel"
/>
1
2
3
4
5
6
7
8
9
10
11
12

# API

参数 说明 类型 可选值 默认值
value v-model 绑定，控制显示隐藏 Boolean - false
round-corner 是否显示圆角 Boolean - false
title 主标题 String - -
sub-title 副标题 String - -
buttons 按钮配置数组 Array - []
cancel-text 取消按钮文字 String - -
click-overlay-close 是否按钮遮罩层关闭 Boolean - false

注意

  1. buttons 是数组对象，每个对象配置如下
参数 说明 类型 可选值 默认值
text 按钮文本 String - -
type 按钮类型 String danger -
closeAfterClick 点击后是否自动关闭 Boolean - false
  1. sub-title 需要在 title 设定的情况下才会展示

# Functions

名称 说明 参数
open 使用 ref 获取到组件后调用 open 方法打开 Actionsheet --
this.$refs.actionsheet.open();
1

# Events

名称 说明 参数
click 在 buttons 参数中的按钮点击事件 index-按钮 index 值
danger-click 在 buttons 参数中 type='danger'的按钮点击事件 index-按钮 index 值
cancel 点击取消按钮事件 -

# 样式变量

变量名 说明 默认值
actionsheet-bg-color 背景颜色 white
actionsheet-border-radius 边框弧度 20rpx
actionsheet-content-button-height 内容按钮高度 108rpx
actionsheet-button-default-color 按钮默认文字颜色 #1F8CEB
actionsheet-button-danger-color 危险按钮文字颜色 #F96F68
actionsheet-button-font-size 按钮文字尺寸 40rpx
actionsheet-cancel-button-height 取消按钮高度 112rpx

注意

Toast 轻提示