ActionSheet 动作面板

预览

01:38



---

组件名：rice-action-sheet

底部弹起的模态面板，包含与当前情境相关的多个选项。支持使用 API 的方式进行调用

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√	√	√

基础使用

<template>
	<rice-navbar title="ActionSheet 动作面板"></rice-navbar>
	<demo-page :row-gap="false">
		<rice-notice-bar message="支持组件调用和API调用两种方式" type="primary" right-icon="arrow-right"
			@click="toApi"></rice-notice-bar>
		<demo-block-title title="基础使用" row-gap show-set />

		<rice-cell-group radius="8px" :custom-style="{margin:'0 16px'}">
			<rice-cell title="基础用法" arrow @click="show=!show" />
			<rice-cell title="显示标题" arrow @click="showTitle=!showTitle" />
			<rice-cell title="展示图标" arrow @click="showIcon=!showIcon" />
			<rice-cell title="展示描述信息" arrow @click="openDesc(false)" />
			<rice-cell title="渐变过渡" arrow :border="false" @click="openDesc(true)" />
		</rice-cell-group>

		<rice-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />
		<rice-action-sheet v-model:show="showTitle" title="一段标题" :actions="actions" />
		<rice-action-sheet v-model:show="showIcon" :actions="actionsIcon" />
		<rice-action-sheet v-model:show="showDesc" :actions="actionsDesc" :opacity="opacity" />

		<demo-block-title title="选项状态" row-gap />
		<rice-cell-group radius="8px" :custom-style="{margin:'0 16px'}">
			<rice-cell title="选项状态" arrow @click="openState(true)" />
			<rice-cell title="点击选项不关闭" arrow :border="false" @click="openState(false)" />
		</rice-cell-group>

		<rice-action-sheet v-model:show="showState" :close-on-click-action="closeOnClickAction" :actions="actionsState"
			@select="onSelect" />

	</demo-page>
</template>

<script setup lang="ts">
import { useNavbarAndTabbarStyle } from "@/store/theme"
import { ActionSheetAction } from "@/uni_modules/rice-ui"
useNavbarAndTabbarStyle()

const show = ref(false)
const showTitle = ref(false)
const showIcon = ref(false)
const showDesc = ref(false)
const opacity = ref(false)
const showState = ref(false)
const closeOnClickAction = ref(true)

const openDesc = (flag : boolean) => {
  opacity.value = flag
  showDesc.value = true
}

const openState = (flag : boolean) => {
  closeOnClickAction.value = flag
  showState.value = true
}

const actions = ref<ActionSheetAction[]>([
  { name: '选项一' },
  { name: '选项二' },
  { name: '选项三' },
])

//带图标
const actionsIcon = ref<ActionSheetAction[]>([
  { name: '选项一', icon: 'star', iconSize: '20px' },
  { name: '选项二', icon: 'shopping', iconSize: '20px' },
  { name: '选项三', icon: 'camera', iconSize: '20px' },
])

//带描述
const actionsDesc = ref<ActionSheetAction[]>([
  { name: '选项一', subname: '这是一段描述' },
  { name: '选项二', subname: '这是一段超长的描述这是一段超长的描述这是一段超长的描述这是一段超长的描述' },
  { name: '选项三' },
])

//选项状态
const actionsState = ref<ActionSheetAction[]>([
  { name: '选项一', color: '#f10a24', icon: 'star', iconSize: '18px'  },
  { name: '选项二', color: '#07c160', icon: 'trophy', iconSize: '18px' },
  { name: '选项三', },
  { name: '选项四', subname: '禁用', disabled: true, icon: 'voice-off' },
])


let timer : number | null = null
const onSelect = (action : ActionSheetAction, index : number) => {
  if (timer != null) clearTimeout(timer!)
  timer = setTimeout(() => {
    uni.showToast({
      title: `点击了：${action.name},索引：${index}`,
      icon: 'none',
      duration: 2500,
    })
  }, 10)
}

const toApi = () => {
  uni.navigateTo({
    url: '/pages/api/action-sheet'
  })
}

onUnload(() => {
  if (timer != null) clearTimeout(timer!)
})
</script>

<style scoped lang="scss">
.flex {
  flex-direction: row;
  flex-wrap: wrap;
}
</style>

API调用

<script setup lang="ts">
import { showActionSheet, hideActionSheet, ActionSheetAction } from "@/uni_modules/rice-ui"

const actions = ref<ActionSheetAction[]>([
  { name: '选项一' },
  { name: '选项二' },
  { name: '选项三' },
])
showActionSheet({
  actions: params,
  select: (action : ActionSheetAction, index : number) => {
    if (timer != null) clearTimeout(timer!)
    timer = setTimeout(() => {
      uni.showToast({
        title: `点击了：${action.name},索引：${index}`,
        icon: 'none',
        duration: 2500,
      })
    }, 10)
  },
  cancel: () => {
    console.log('点击了取消')
  }
})

</script>

Api

Props

属性名	类型	说明	默认值
v-model:show/show	Boolean	是否显示	-
actions	ActionSheetAction[]	面板选项列表，数据格式见下方类型	-
title	String	面板标题	-
show-cancel	Boolean	是否显示取消按钮	-
cancel-text	String	取消按钮文字	-
duration	Number	动画时长，单位ms，默认300ms	-
z-index	Number	z-index的值	-
opacity	Boolean	是否使用渐变过渡	-
overlay	Boolean	是否显示遮罩	-
overlay-bg-color	String	遮罩层的背景色	-
close-on-click-action	Boolean	点击选项后是否关闭	-
close-on-click-overlay	Boolean	点击遮罩是否关闭	-
radius	String|Number	圆角值	-
safe-area-inset-bottom	Boolean	是否开启底部安全区	-
use-dialog-page	Boolean	是否使用dialogPage，仅APP支持	-
custom-style	Object	自定义样式	-

Events

事件名	说明	回调参数
select	选择了选项时触发	(action:ActionSheetAction,index:number)
cancel	点击取消按钮时触发	-
open	打开时触发	-
close	关闭时触发	-
opened	打开动画结束时触发	-
closed	关闭动画结束时触发	-
clickOverlay	点击遮罩层时触发	-

类型定义

type ActionSheetAction = {
	name : string,
	subname ?: string,
	color ?: string,
	icon ?: string,
	iconSize ?: string | number,
	disabled ?: boolean,
}

组件导出如下类型

// 组件类型
const actionSheetRef = ref<RiceActionSheetComponentPublicInstance | null>(null)