qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

ActionSheet 动作面板

该组件提供了一种多端统一的 动作面板 样式与 IOS 对齐，在页面上的层级为 1010

使用指南

在 Taro 文件中引入组件

import { AtActionSheet, AtActionSheetItem } from 'taro-ui-vue3'

组件依赖的样式文件（仅按需引用时需要）

@import "taro-ui-vue3/dist/style/components/action-sheet.scss";

一般用法

<template>
  <AtActionSheet
    :isOpened="isOpened1"
    @close="handleClose"
  >
    <AtActionSheetItem
        @click="clickBtn1"
    >
      按钮一
    </AtActionSheetItem>
    <AtActionSheetItem
        @click="clickBtn2"
    >
      按钮二
    </AtActionSheetItem>
  </AtActionSheet>
</template>
<script>
import Taro from '@tarojs/taro'
export default {
  name: 'AtActionSheetDemo',
  data() {
    return {
      isOpened1: true
    }
  },
  methods: {
    handleClose() {
      this.isOpened1 = false
    },
    showToast (name) {
      Taro.showToast({
        icon: 'none',
        title: name
      })
    },
    clickBtn1() {
      this.showToast('点击了按钮一')
    },
    clickBtn2() {
      this.showToast('点击了按钮二')
    },
  }
}
</script>

添加标题和底部取消按钮

<template>
  <AtActionSheet
    cancelText='取消'
    :isOpened="isOpened2"
    title='清除位置信息后， 别人将不能查看到你'
  >
    <AtActionSheetItem
        @click="clickBtn1"
    >
      按钮一
    </AtActionSheetItem>
    <AtActionSheetItem
        @click="clickBtn2"
    >
      按钮二
    </AtActionSheetItem>
  </AtActionSheet>
</template>

添加监听事件

<template>
  <AtActionSheet
    cancelText='取消'
    :isOpened="state.isOpened3"
    @cancel="handleCancel"
    @close="handleClose"
    title='清除位置信息后， 别人将不能查看到你'
  >
    <AtActionSheetItem
        @click="clickBtn1"
    >
      按钮一
    </AtActionSheetItem>
    <AtActionSheetItem
        @click="clickBtn2"
    >
      按钮二
    </AtActionSheetItem>
    <AtActionSheetItem
        @click="clickBtn3"
    >
      <text class='danger'>清除位置信息并退出</text>
    </AtActionSheetItem>
  </AtActionSheet>
</template>

AtActionSheet 参数

参数说明类型可选值默认值
title元素的标题String--
isOpened是否展示元素Boolean-false
cancelText取消按钮的内容String--

AtActionSheet 事件

事件名称说明返回参数
onClose元素被关闭触发的事件-
onCancel点击了底部取消按钮触发的事件-

AtActionSheetItem 事件

事件名称说明返回参数
onClick点击 Item 触发的事件-