目录

#平台差异说明

#基本使用

#配置顶部的提示信息和底部取消按钮

#如何知道点了第几项

#API

#Props

#Event


本组件用于从底部弹出一个操作菜单,供用户选择并返回结果。
本组件功能类似于uni的uni.showActionSheetAPI,配置更加灵活,所有平台都表现一致。

#平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序

#基本使用

  • 通过list设置需要显示的菜单,该值为一个数组,元素为对象,对象至少要提供text属性,另外可选的有fontSize(字体大小),color(颜色),disabled(是否禁用,1.5.6引入),subText(描述信息,1.6.8引入)
  • 通过v-model绑定一个值为布尔值的变量控制组件的弹出与收起,v-model的值是双向绑定的
打开ActionSheetexport default {data() {return {list: [{text: '点赞',color: 'blue',fontSize: 28,subText: '感谢您的点赞'}, {text: '分享'}, {text: '评论' }],show: false}}}

#配置顶部的提示信息和底部取消按钮

  • tips参数为一个对象类型,属性可以设置textfontSize(字体大小),color(颜色),文本内容将会显示组件的上方,起提示作用。
  • cancel-btn参数配置是否显示底部的取消按钮,默认显示
export default {data() {return {tips: {text: '在水一方',color: '#909399',fontSize: 24},list: [{text: '点赞',color: 'blue',fontSize: 28}],show: true}}}

#如何知道点了第几项

click回调事件带有一个index值,这个索引值为传递的list数组的索引值,根据回调事件,能获得点击了 第几项和该项的内容

export default {data() {return {list: [{text: '点赞',color: 'blue',fontSize: 28}, {text: '分享'}, {text: '评论'}],show: true}},methods: {click(index) {console.log(`点击了第${index + 1}项,内容为:${this.list[index].text}`)}}}

#API

#Props

注意:props中没有控制组件弹出与收起的参数,因为这是通过v-model绑定变量实现的,见上方说明。

参数说明类型默认值可选值
list按钮的文字数组,见上方文档示例Array[ ]
tips顶部的提示文字,见上方文档示例Object
cancel-btn是否显示底部的取消按钮Booleantruefalse
border-radius弹出部分顶部左右的圆角值,单位rpxNumber \ String0
mask-close-able点击遮罩是否可以关闭Booleantruefalse
safe-area-inset-bottom是否开启底部安全区适配Booleanfalsetrue
z-indexz-indexNumber \ String1075
cancel-text1.3.0取消按钮的提示文字String取消

#Event

事件名说明回调参数版本
click点击ActionSheet列表项时触发index: 点击了第几个,从0开始
close点击取消按钮时触发