Sard Uniapp

Appearance

在新窗口打开⤴

ActionSheet动作面板

介绍 ​

从底部向上弹出动作菜单。

引入 ​

js
import ActionSheet from 'sard-uniapp/components/action-sheet/action-sheet.vue'
import ActionSheetAgent from 'sard-uniapp/components/action-sheet-agent/action-sheet-agent.vue'
import { actionSheet } from 'sard-uniapp'

代码演示 ​

基础使用 ​

使用 v-model:visible 属性控制显隐，使用 itemList 属性配置动作项。

vue
<template>
  <sar-button @click="visible = true">显示</sar-button>
  <sar-action-sheet
    v-model:visible="visible"
    :item-list="itemList"
    @select="onSelect"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { toast, type ActionSheetItem } from 'sard-uniapp'

const visible = ref(false)
const itemList = ref([{ name: '选项1' }, { name: '选项2' }, { name: '选项3' }])

const onSelect = (item: ActionSheetItem) => {
  toast(item.name)
}
</script>
vue
<template>
  <sar-button @click="visible = true">显示</sar-button>
  <sar-action-sheet
    v-model:visible="visible"
    :item-list="itemList"
    @select="onSelect"
  />
</template>

<script setup lang="js">
import { ref } from "vue";
import { toast } from "sard-uniapp";
const visible = ref(false);
const itemList = ref([{ name: "\u9009\u98791" }, { name: "\u9009\u98792" }, { name: "\u9009\u98793" }]);
const onSelect = (item) => {
  toast(item.name);
};
</script>

取消按钮 ​

设置 show-cancel 属性展示取消按钮，或者使用 cancel 属性在设置取消按钮文本的同时显示取消按钮。

vue
<template>
  <sar-button @click="visible = true">显示</sar-button>
  <sar-action-sheet
    v-model:visible="visible"
    show-cancel
    :item-list="itemList"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)

const itemList = ref([{ name: '选项1' }, { name: '选项2' }, { name: '选项3' }])
</script>
vue
<template>
  <sar-button @click="visible = true">显示</sar-button>
  <sar-action-sheet
    v-model:visible="visible"
    show-cancel
    :item-list="itemList"
  />
</template>

<script setup lang="js">
import { ref } from "vue";
const visible = ref(false);
const itemList = ref([{ name: "\u9009\u98791" }, { name: "\u9009\u98792" }, { name: "\u9009\u98793" }]);
</script>

描述信息 ​

使用 description 属性对整个动作面板做一个解释说明。使用动作项的 description 属性对某个动作做一个解释说明。

vue
<template>
  <sar-button @click="visible = true">显示</sar-button>
  <sar-action-sheet
    v-model:visible="visible"
    description="这是一段很长很长的描述信息"
    cancel="取消"
    :item-list="itemList"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
const itemList = ref([
  { name: '选项1' },
  { name: '选项2', description: '描述信息' },
  { name: '选项3' },
])
</script>
vue
<template>
  <sar-button @click="visible = true">显示</sar-button>
  <sar-action-sheet
    v-model:visible="visible"
    description="这是一段很长很长的描述信息"
    cancel="取消"
    :item-list="itemList"
  />
</template>

<script setup lang="js">
import { ref } from "vue";
const visible = ref(false);
const itemList = ref([
  { name: "\u9009\u98791" },
  { name: "\u9009\u98792", description: "\u63CF\u8FF0\u4FE1\u606F" },
  { name: "\u9009\u98793" }
]);
</script>

动作状态 ​

每个动作项都可以配置 color、disabled、loading 等属性来展示当前的状态。

vue
<template>
  <sar-button @click="visible = true">显示</sar-button>
  <sar-action-sheet
    v-model:visible="visible"
    cancel="取消"
    :item-list="itemList"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
const itemList = ref([
  { name: '选项1', color: 'var(--sar-red)' },
  { name: '选项2', disabled: true },
  { name: '选项3', loading: true },
])
</script>
vue
<template>
  <sar-button @click="visible = true">显示</sar-button>
  <sar-action-sheet
    v-model:visible="visible"
    cancel="取消"
    :item-list="itemList"
  />
</template>

<script setup lang="js">
import { ref } from "vue";
const visible = ref(false);
const itemList = ref([
  { name: "\u9009\u98791", color: "var(--sar-red)" },
  { name: "\u9009\u98792", disabled: true },
  { name: "\u9009\u98793", loading: true }
]);
</script>

命令式 1.25.6+ ​

先在页面放置代理组件。

tsx
<sar-action-sheet-agent />

接着便可以使用 actionSheet 方法显示动作面板。

vue
<template>
  <sar-button @click="onClick">显示</sar-button>
</template>

<script setup lang="ts">
import { actionSheet, toast } from 'sard-uniapp'

const onClick = () => {
  actionSheet({
    description: '请选择',
    itemList: [{ name: '选项1' }, { name: '选项2' }, { name: '选项3' }],
    showCancel: true,
    onSelect(item) {
      toast(item.name)
    },
  })
}
</script>
vue
<template>
  <sar-button @click="onClick">显示</sar-button>
</template>

<script setup lang="js">
import { actionSheet, toast } from "sard-uniapp";
const onClick = () => {
  actionSheet({
    description: "\u8BF7\u9009\u62E9",
    itemList: [{ name: "\u9009\u98791" }, { name: "\u9009\u98792" }, { name: "\u9009\u98793" }],
    showCancel: true,
    onSelect(item) {
      toast(item.name);
    }
  });
};
</script>

API ​

ActionSheetProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
description动作面板描述说明string-
item-list面板项列表ActionSheetItem[][]
show-cancel 1.25.6+是否显示取消按钮booleanfalse
cancel自定义取消按钮文字string-
visible是否显示动作面板booleanfalse
overlay-closable点击遮罩后是否关闭booleantrue
before-close关闭前的回调，返回 false 或 rejected 状态的 Promise 可阻止关闭ActionSheetBeforeClose-
duration显隐动画时长，单位 msnumber300

ActionSheetBeforeClose ​

ts
type ActionSheetBeforeClose =
  | ((
      type: 'close' | 'cancel',
      loading: {
        readonly cancel: boolean
        readonly select: boolean
        readonly close: boolean
      },
    ) => any | Promise<any>)
  | ((
      type: 'select',
      item: ActionSheetItem,
      index: number,
      loading: {
        readonly cancel: boolean
        readonly select: boolean
        readonly close: boolean
      },
    ) => any | Promise<any>)
  • 当点击动作项时，type 为 select；
  • 当点击取消按钮时，type 为 cancel；
  • 当点击遮罩时，type 为 close。

loading 表示当前哪个按钮处于异步关闭状态。

ActionSheetItem ​

属性描述类型默认值
name动作名称string-
description动作的描述说明string-
color字体颜色string-
disabled禁用状态booleanfalse
loading加载状态booleanfalse

ActionSheetEmits ​

事件描述类型
update:visible动作面板显隐时触发(visible: boolean) => void
close点击遮罩时触发() => void
cancel点击取消按钮时触发() => void
select点击动作按钮时触发(item: ActionSheetItem, index: number) => void
visible-hook 1.22.1+入场/退场动画状态改变时触发(name: TransitionHookName) => void
before-enter 1.22.1+入场动画开始前触发() => void
enter 1.22.1+入场动画开始时触发() => void
after-enter 1.22.1+入场动画结束时触发() => void
enter-cancelled 1.22.1+入场动画取消时触发() => void
before-leave 1.22.1+退场动画开始前触发() => void
leave 1.22.1+退场动画开始时触发() => void
after-leave 1.22.1+退场动画结束时触发() => void
leave-cancelled 1.22.1+退场动画取消时触发() => void

ActionSheetAgentProps / ActionSheetOptions 1.25.6+ ​

继承 ActionSheetProps 并有以下额外属性。

属性描述类型默认值
id动作面板组件的 idstring'actionSheet'
onClose点击遮罩时调用() => void
onCancel点击取消按钮时调用() => void
onSelect点击动作项时调用(item: ActionSheetItem, index: number) => void
onVisibleHook入场/退场动画状态改变时调用(name: TransitionHookName) => void
onBeforeEnter入场动画开始前调用() => void
onEnter入场动画开始时调用() => void
onAfterEnter入场动画结束时调用() => void
onEnterCancelled入场动画取消时调用() => void
onBeforeLeave退场动画开始前调用() => void
onLeave退场动画开始时调用() => void
onAfterLeave退场动画结束时调用() => void
onLeaveCancelled退场动画取消时调用() => void

ActionSheetAgentEmits 1.25.6+ ​

继承 ActionSheetEmits。

命令式方法 1.25.6+ ​

名称描述类型
actionSheet显示动作面板ActionSheetFunction
hide隐藏指定 id 的命令式动作面板(id = 'actionSheet') => void
hideAll隐藏所有命令式动作面板() => void

ActionSheetFunction 1.25.6+ ​

ts
type ActionSheetFunction = ActionSheetSimpleShowFunction & {
  hide: (id?: string) => void
  hideAll: () => void
}

ActionSheetSimpleShowFunction 1.25.6+ ​

ts
interface ActionSheetSimpleShowFunction {
  (options: ActionSheetOptions): void
}

主题定制 ​

CSS 变量 ​

scss
page,
.sar-portal {
  --sar-action-sheet-border-radius: var(--sar-rounded-xl);
  --sar-action-sheet-border-color: var(--sar-border-color);
  --sar-action-sheet-bg: var(--sar-emphasis-bg);
  --sar-action-sheet-active-bg: var(--sar-active-bg);

  --sar-action-sheet-description-padding: 32rpx;
  --sar-action-sheet-description-font-size: var(--sar-text-base);
  --sar-action-sheet-description-color: var(--sar-tertiary-color);

  --sar-action-sheet-item-min-height: 96rpx;
  --sar-action-sheet-item-padding: 16rpx 32rpx;

  --sar-action-sheet-gap-bg: var(--sar-body-bg);
  --sar-action-sheet-gap-height: 16rpx;

  --sar-action-sheet-item-name-font-size: var(--sar-text-lg);

  --sar-action-sheet-item-description-margin-top: 16rpx;
  --sar-action-sheet-item-description-font-size: var(--sar-text-sm);
  --sar-action-sheet-item-description-color: var(--sar-tertiary-color);

  --sar-action-sheet-loading-size: 40rpx;
  --sar-action-sheet-loading-color: var(--sar-fourth-color);

  --sar-action-sheet-cancel-min-height: 96rpx;
  --sar-action-sheet-cancel-padding: 16rpx 32rpx;
  --sar-action-sheet-cancel-font-size: var(--sar-text-lg);
}

Released under the MIT License.

Copyright © 2023-present wuzhitao