Appearance

iuiDesign
100%
02:32
本页目录

滑动操作组件，左右滑动拉出菜单栏

基本使用 ​

使用 swipe-action 组件包裹需要滑动操作的内容，通过 actions 属性设置操作按钮。

html
<iui-swipe-action
  :actions="[
        {
          icon: 'delete',
          text: '删除',
          style: { background: '#F53F3F' },
          onClick: onClick,
        },
      ]"
>
  <iui-cell label="Single menu"></iui-cell>
</iui-swipe-action>

<script setup lang="ts">
  const onClick = (text, index) => {
    console.log("click", text, index);
  };
</script>
<iui-swipe-action
  :actions="[
        {
          icon: 'delete',
          text: '删除',
          style: { background: '#F53F3F' },
          onClick: onClick,
        },
      ]"
>
  <iui-cell label="Single menu"></iui-cell>
</iui-swipe-action>

<script setup lang="ts">
  const onClick = (text, index) => {
    console.log("click", text, index);
  };
</script>

自定义内容 ​

在 actions 列表项中设置 slotName 属性， 通过插槽可以自定义滑动操作的内容。

html
<iui-swipe-action :actions="[{ slotName: 'del' }]">
      <iui-cell label="Custom slot"></iui-cell>

      <template #del>
        <view
          style="
            background-color: #00b42a;
            height: 100%;
            width: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            padding: 12px;
            white-space: nowrap;
            box-sizing: border-box;
          "
        >
          <iui-icon name="smile"></iui-icon>
          <view style="display: flex; align-items: center; padding-left: 5px"
            >通过Slot自定义内容</view
          >
        </view>
      </template>
    </iui-swipe-action>
<iui-swipe-action :actions="[{ slotName: 'del' }]">
      <iui-cell label="Custom slot"></iui-cell>

      <template #del>
        <view
          style="
            background-color: #00b42a;
            height: 100%;
            width: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            padding: 12px;
            white-space: nowrap;
            box-sizing: border-box;
          "
        >
          <iui-icon name="smile"></iui-icon>
          <view style="display: flex; align-items: center; padding-left: 5px"
            >通过Slot自定义内容</view
          >
        </view>
      </template>
    </iui-swipe-action>

API ​

<SwipeAction>props
参数描述类型默认值
actions按钮组Action[][]
defaultOpen是否默认展开Booleanfalse
<SwipeAction>slots
插槽名描述参数
default滑动元素-
{{ action.slotName }}按钮插槽-
<Action>props
参数描述类型默认值
text按钮文字String-
style按钮样式Object-
icon按钮图标String-
slotName按钮插槽名称String-
onClick按钮点击事件Function-