界面组件 UI Components

动作表 Action Sheet

1. 应用场景
2. Vue.js Reference
3. React Native Reference

动作表 (Action Sheet) 是响应用户某项操作而出现的动作提示，要求用户从至少两个选项中选择操作。动作表通常从底部滑出，应含有取消按钮让用户消除动作表。 动作表用于让用户进行某种操作，或要求用户进行解绑银行卡等破坏性操作前确认是否继续。

适用情况

• 如果选项中有破坏性动作，如删除、解绑银行卡，应该使用系统色 #ED171F 作为该文字按钮的颜色以警示用户。
• 操作选项控制在 6 项以内。

不适用情况

• 在动作表中使用图标等视觉元素。建议：动作表仅使用纯文字表达动作。
• 使用动作表 (Action Sheet) 进行数据输入。建议：数据输入时使用 Picker。

<up-actionsheet v-model="popupShow" :items="items" cancel-title="取消" @onPress="onPress" @onCancelPress="onCancelPress" ></up-actionsheet>


<script>

export default {
  data () {
    return {
      popupShow:true,
      items:[
        {
          title: '支持银行列表',
        },
        {
          title: '小额免密支付',
        },
        {
          title: '使用说明',
        },
        {
          title: '解绑银行卡',
          alert: true,
        }
      ],
    }
  },
  methods:{
    onPress(ev){
      console.log(ev)
    },
    onCancelPress(){
      console.log('取消')
    },
  },
}
</script>

let items = [
	{title: '支持银行列表', onPress: () => alert('Hello')},
	{title: '小额免密支付', },
	{title: '使用说明', },
	{title: '解绑银行卡', alert: true},
];
let cancelItem = {title: '取消'};
ActionSheet.show(items, cancelItem);

应用场景

• 动作表 (Action Sheet) 仅可以用来承载操作功能而非数据输入，数据输入时，请使用选择器 (Picker)。

• 动作表 (Action Sheet) 使用更加普遍，广泛用于各类操作功能选择，所以一般性操作请优先考虑使用动作表 (Action Sheet) ； 相比之下，下拉菜单 (Dropdown) 仅用于 “···” (更多) 图标的情况上，且比起动作表 (Action Sheet) 来说下拉菜单 (Dropdown) 更加轻量，对用户操作打断较小，适用于希望用户快速进行下一步操作的情况。

Vue.js Reference

菜单项配置参数说明

React Native Reference

ActionSheet.show() 函数参数说明

菜单项配置参数说明