ActionSheet 操作菜单

本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，不限数量，所有平台都表现一致。

基本用法

actionSheet.value.open({
  // 属性
  title:'',
  list:[],
  // ...

  // 事件
  select(res){
    console.log(res)
  },
  // ...
})

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
title	String	null	标题	All
desc	String	null	描述	All
list	Array	[]	按钮列表 参考c-btn的props，格式:[{text:'操作1'}]	All
cancelBtn	Boolean,String	true	取消按钮	All
radius	Number,String	null	圆角	All
closeOnMaskClick	Boolean	true	点击遮罩关闭	All
maskBgColor	String	rgba(0, 0, 0, 0.4)	弹出层背景	All
animation	Boolean	true	开启动画	All
customTabBar	Boolean	false	是否自定义tabBar	MP-WEIXIN
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持c-bg-开头的背景色类	All

提示

微信小程序tabBar页面使用，当自定义tabBar时，需要设置customTabBar为true，否则会显示不正确。

事件

事件名	说明
select	name选择菜单时
getphonenumber	参考uni-app的button组件
getuserinfo	参考uni-app的button组件
error	参考uni-app的button组件
opensetting	参考uni-app的button组件
launchapp	参考uni-app的button组件
contact	参考uni-app的button组件
chooseavatar	参考uni-app的button组件
addgroupapp	参考uni-app的button组件
chooseaddress	参考uni-app的button组件
chooseinvoicetitle	参考uni-app的button组件
subscribe	参考uni-app的button组件
login	参考uni-app的button组件
im	参考uni-app的button组件

插槽

插槽名	说明
title	标题

方法

名称	说明
open(null|props)	打开ActionSheet 传递props时，将覆盖组件props
close()	关闭

示例

<template>
  <c-action-sheet ref="actionSheet" />
  <c-btn text="打开" @click="open" />
</template>
<script setup>
import {ref} from 'vue'

const actionSheet = ref(null);
function open(){
  actionSheet.value.open({
    title:'请选择',
    list:[{text:'扫一扫二维码'},{text:'设备查询'}],
    select(res){
      console.log(res)
    }
  })
}
</script>