Appearance

iuiDesign
100%
02:32
本页目录

由用户操作后触发的一种特定的模态弹出框 ，呈现一组与当前情境相关的两个或多个选项。

基本使用 ​

触发后弹出动作列表。

html
<iui-action-sheet
  v-model="visible"
  :actions="['Option 1', 'Option 2', 'Option 3']"
  cancelText="Cancel"
>
</iui-action-sheet>

<script setup>
  import { ref } from "vue";

  const visible = ref(false);
  onMounted(() => {
    visible.value = true;
  });
</script>
<iui-action-sheet
  v-model="visible"
  :actions="['Option 1', 'Option 2', 'Option 3']"
  cancelText="Cancel"
>
</iui-action-sheet>

<script setup>
  import { ref } from "vue";

  const visible = ref(false);
  onMounted(() => {
    visible.value = true;
  });
</script>

函数调用 ​

如果想使用函数调用，需要定义 ref，通过 open 方法调用。

html
<iui-action-sheet ref="sheet"></iui-action-sheet>

<script setup>
  import { ref } from "vue";

  const sheet = ref(null);
  const open = () => {
    sheet.value.open({
      actions: [
        "Option 1",
        "Option 2",
        "Option 3",
        { name: "Delete", color: "red" }, // 支持自定义颜色
      ],
      cancelText: "Cancel",
    });
  };

  onMounted(() => {
    open();
  });
</script>
<iui-action-sheet ref="sheet"></iui-action-sheet>

<script setup>
  import { ref } from "vue";

  const sheet = ref(null);
  const open = () => {
    sheet.value.open({
      actions: [
        "Option 1",
        "Option 2",
        "Option 3",
        { name: "Delete", color: "red" }, // 支持自定义颜色
      ],
      cancelText: "Cancel",
    });
  };

  onMounted(() => {
    open();
  });
</script>

自定义内容 ​

传入的 actions 列表项支持自定义内容，通过 slotName 指定对应的 slot。

html
<iui-action-sheet ref="slotSheet">
  <!-- 通过slotName自定义 -->
  <template #tip>
    <view class="tip">
      <view class="title">This is a line of header text</view>
      <view class="desc">
        This is one or two lines of descriptive information. This is one or two
        lines of description.</view
      >
    </view>
  </template>
</iui-action-sheet>

<script setup>
  import { ref } from "vue";

  const slotSheet = ref(null);
  const open = () => {
    slotSheet.value.open({
      // 自定义内容需要设置slotName
      actions: [{ slotName: "tip" }, { name: "Confirm", color: "#165DFF" }],
      cancelText: "Cancel",
    });
  };

  onMounted(() => {
    open();
  });
</script>
<iui-action-sheet ref="slotSheet">
  <!-- 通过slotName自定义 -->
  <template #tip>
    <view class="tip">
      <view class="title">This is a line of header text</view>
      <view class="desc">
        This is one or two lines of descriptive information. This is one or two
        lines of description.</view
      >
    </view>
  </template>
</iui-action-sheet>

<script setup>
  import { ref } from "vue";

  const slotSheet = ref(null);
  const open = () => {
    slotSheet.value.open({
      // 自定义内容需要设置slotName
      actions: [{ slotName: "tip" }, { name: "Confirm", color: "#165DFF" }],
      cancelText: "Cancel",
    });
  };

  onMounted(() => {
    open();
  });
</script>
scss
.tip {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 16px 0;
  width: 100%;
  .title {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    width: 100%;
  }
  .desc {
    margin-top: 6px;
    text-align: center;
    font-size: 14px;
    color: #999;
  }
}
.tip {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 16px 0;
  width: 100%;
  .title {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    width: 100%;
  }
  .desc {
    margin-top: 6px;
    text-align: center;
    font-size: 14px;
    color: #999;
  }
}

API ​

<Actionsheet>props
参数描述类型默认值
modelValue (v-model)是否显示Booleanfalse
title标题String-
radius圆角Number6
actions动作列表String[] | Action[][]
cancel显示取消按钮Booleantrue
cancelText取消按钮文本String取消
<Actionsheet>events
事件名描述参数
open动作列表打开事件-
close动作列表关闭事件-
click点击动作事件(action, index)
<Actionsheet>methods
方法名描述参数
open打开动作列表props: Object
<Actionsheet>slots
插槽名描述参数
{{ action.slotName }}自定义动作-
<Action>props
参数描述类型默认值
name显示文本String-
color文字颜色String-
slotName插槽名称String-