本组件用于从底部弹出一个操作菜单,供用户选择并返回结果。
本组件功能类似于uni的uni.showActionSheetAPI,配置更加灵活,所有平台都表现一致。
#平台差异说明
| App(vue) | App(nvue) | H5 | 小程序 |
|---|---|---|---|
| √ | √ | √ | √ |
#基本使用
- 通过
title(设置标题),cancelText(取消按钮的文字,不为空时显示按钮),description(选项上方的描述信息) - 通过
actions设置需要显示的菜单,该值为一个数组,元素为对象,对象至少要提供name属性,另外可选的有subname(描述),disabled(是否禁用),loading(加载动画),color(字体颜色),fontSize(字体大小), - 通过
show绑定一个值为布尔值的变量控制组件的弹出与收起,show的值是双向绑定的
<template><view><u-action-sheet :actions="list" :title="title" :show="show"></u-action-sheet><u-button @click="show = true">打开ActionSheet</u-button></view>
</template><script>
export default {data() {return {title:'标题',list: [{name:'选项一',subname:"选项一描述",color:'#ffaa7f',fontSize:'20'},{name: '选项二禁用',disabled:true},{name: '开启load加载', //开启后文字不显示loading:true}],show: false};}
};
</script>
copy
#配置点击遮罩关闭和点击某个菜单项时关闭弹窗
- 通过
closeOnClickAction参数来配置点击某个菜单项时是否关闭弹窗。 - 通过
closeOnClickOverlay参数配置点击遮罩是否允许关闭(注意:关闭事件需要自行处理,只会在开启closeOnClickOverlay后点击遮罩层执行close回调)
<template><view><u-action-sheet :actions="list" :closeOnClickOverlay="true" :closeOnClickAction="true" :title="title" :show="show"></u-action-sheet><u-button @click="show = true">打开ActionSheet</u-button></view>
</template><script>
export default {data() {return {title:'标题',list: [{name:'选项一'},{name: '选项二'}],show: false};},onLoad() {},methods: {}
};
</script>
copy
#点击获取所点击选项name
select回调事件带有一个object值,这个索引值为传递的select数组的name值,根据回调事件,能获得点击了 该项的内容
<template><view><u-action-sheet :actions="list" @select="selectClick" :title="title" :show="show"></u-action-sheet><u-button @click="show = true">打开ActionSheet</u-button></view>
</template><script>
export default {data() {return {title:'标题',list: [{name:'选项一'},{name: '选项二'}],show: false};},onLoad() {},methods: {selectClick(index){console.log(index)}}
};
</script>