Tuniao UI Uniapp V3

Appearance

12:13

TnSwipeAction 滑动菜单 ​

该组件一般用于左滑呼出菜单，一般用于左滑显示删除按钮等场景。

组件位置 ​

typescript
import TnSwipeAction from '@tuniao/tnui-vue3-uniapp/components/swipe-action/src/swipe-action.vue'
import TnSwipeActionItem from '@tuniao/tnui-vue3-uniapp/components/swipe-action/src/swipe-action-item.vue'
import TnSwipeAction from '@tuniao/tnui-vue3-uniapp/components/swipe-action/src/swipe-action.vue'
import TnSwipeActionItem from '@tuniao/tnui-vue3-uniapp/components/swipe-action/src/swipe-action-item.vue'
typescript
import TnSwipeAction from '@/uni_modules/tuniaoui-vue3/components/swipe-action/src/swipe-action.vue'
import TnSwipeActionItem from '@/uni_modules/tuniaoui-vue3/components/swipe-action/src/swipe-action-item.vue'
import TnSwipeAction from '@/uni_modules/tuniaoui-vue3/components/swipe-action/src/swipe-action.vue'
import TnSwipeActionItem from '@/uni_modules/tuniaoui-vue3/components/swipe-action/src/swipe-action-item.vue'

平台差异说明 ​

App(vue)H5微信小程序支付宝小程序...
√√√√适配中

基础使用 ​

  • 在TnSwipeAction组件中使用TnSwipeActionItem组件，TnSwipeActionItem组件的slot中可以放置任意内容

  • 通过TnSwipeActionItem的options属性设置操作菜单的文字、图标、颜色等，如果没有设置options属性，则不会显示操作菜单

vue
<script lang="ts" setup>
import type { SwipeActionItemOption } from '@tuniao/tnui-vue3-uniapp'

const options: SwipeActionItemOption = [
  {
    text: '置顶',
    icon: 'star',
    bgColor: 'tn-orange',
  },
  {
    text: '删除',
    icon: 'delete',
    bgColor: 'tn-red',
  },
]
</script>

<template>
  <TnSwipeAction>
    <TnSwipeActionItem v-for="i in 3" :key="i" :options="options">
      <view class="swipe-action-item-demo tn-flex-center"> 图鸟UI </view>
    </TnSwipeActionItem>
  </TnSwipeAction>
</template>
<script lang="ts" setup>
import type { SwipeActionItemOption } from '@tuniao/tnui-vue3-uniapp'

const options: SwipeActionItemOption = [
  {
    text: '置顶',
    icon: 'star',
    bgColor: 'tn-orange',
  },
  {
    text: '删除',
    icon: 'delete',
    bgColor: 'tn-red',
  },
]
</script>

<template>
  <TnSwipeAction>
    <TnSwipeActionItem v-for="i in 3" :key="i" :options="options">
      <view class="swipe-action-item-demo tn-flex-center"> 图鸟UI </view>
    </TnSwipeActionItem>
  </TnSwipeAction>
</template>
vue
<script lang="ts" setup>
import type { SwipeActionItemOption } from '@/uni_modules/tuniaoui-vue3'

const options: SwipeActionItemOption = [
  {
    text: '置顶',
    icon: 'star',
    bgColor: 'tn-orange',
  },
  {
    text: '删除',
    icon: 'delete',
    bgColor: 'tn-red',
  },
]
</script>

<template>
  <tn-swipe-action>
    <tn-swipe-action-item v-for="i in 3" :key="i" :options="options">
      <view class="swipe-action-item-demo tn-flex-center"> 图鸟UI </view>
    </tn-swipe-action-item>
  </tn-swipe-action>
</template>
<script lang="ts" setup>
import type { SwipeActionItemOption } from '@/uni_modules/tuniaoui-vue3'

const options: SwipeActionItemOption = [
  {
    text: '置顶',
    icon: 'star',
    bgColor: 'tn-orange',
  },
  {
    text: '删除',
    icon: 'delete',
    bgColor: 'tn-red',
  },
]
</script>

<template>
  <tn-swipe-action>
    <tn-swipe-action-item v-for="i in 3" :key="i" :options="options">
      <view class="swipe-action-item-demo tn-flex-center"> 图鸟UI </view>
    </tn-swipe-action-item>
  </tn-swipe-action>
</template>

禁止滑动 ​

可以通过TnSwipeAction的disabled属性设置是否禁止滑动

vue
<template>
  <TnSwipeAction>
    <TnSwipeActionItem :options="options" disabled>
      <view class="swipe-action-item-demo tn-flex-center"> 图鸟UI </view>
    </TnSwipeActionItem>
  </TnSwipeAction>
</template>
<template>
  <TnSwipeAction>
    <TnSwipeActionItem :options="options" disabled>
      <view class="swipe-action-item-demo tn-flex-center"> 图鸟UI </view>
    </TnSwipeActionItem>
  </TnSwipeAction>
</template>

禁止操作菜单进行选择操作 ​

可以对TnSwipeActionItem的options中disabled设置为true，则该操作菜单不可进行选择操作

vue
<script lang="ts" setup>
import type { SwipeActionItemOption } from '@tuniao/tnui-vue3-uniapp'

const options: SwipeActionItemOption = [
  {
    text: '置顶',
    icon: 'star',
    bgColor: 'tn-orange',
  },
  {
    text: '删除',
    icon: 'delete',
    bgColor: 'tn-red',
    disabled: true,
  },
]
</script>

<template>
  <TnSwipeAction>
    <TnSwipeActionItem :options="options">
      <view class="swipe-action-item-demo tn-flex-center"> 图鸟UI </view>
    </TnSwipeActionItem>
  </TnSwipeAction>
</template>
<script lang="ts" setup>
import type { SwipeActionItemOption } from '@tuniao/tnui-vue3-uniapp'

const options: SwipeActionItemOption = [
  {
    text: '置顶',
    icon: 'star',
    bgColor: 'tn-orange',
  },
  {
    text: '删除',
    icon: 'delete',
    bgColor: 'tn-red',
    disabled: true,
  },
]
</script>

<template>
  <TnSwipeAction>
    <TnSwipeActionItem :options="options">
      <view class="swipe-action-item-demo tn-flex-center"> 图鸟UI </view>
    </TnSwipeActionItem>
  </TnSwipeAction>
</template>
vue
<script lang="ts" setup>
import type { SwipeActionItemOption } from '@/uni_modules/tuniaoui-vue3'

const options: SwipeActionItemOption = [
  {
    text: '置顶',
    icon: 'star',
    bgColor: 'tn-orange',
  },
  {
    text: '删除',
    icon: 'delete',
    bgColor: 'tn-red',
    disabled: true,
  },
]
</script>

<template>
  <tn-swipe-action>
    <tn-swipe-action-item :options="options">
      <view class="swipe-action-item-demo tn-flex-center"> 图鸟UI </view>
    </tn-swipe-action-item>
  </tn-swipe-action>
</template>
<script lang="ts" setup>
import type { SwipeActionItemOption } from '@/uni_modules/tuniaoui-vue3'

const options: SwipeActionItemOption = [
  {
    text: '置顶',
    icon: 'star',
    bgColor: 'tn-orange',
  },
  {
    text: '删除',
    icon: 'delete',
    bgColor: 'tn-red',
    disabled: true,
  },
]
</script>

<template>
  <tn-swipe-action>
    <tn-swipe-action-item :options="options">
      <view class="swipe-action-item-demo tn-flex-center"> 图鸟UI </view>
    </tn-swipe-action-item>
  </tn-swipe-action>
</template>

同时打开多个操作菜单 ​

一般的情况下，在同一个TnSwipeAction组件中，只能打开一个操作菜单，如果需要同时打开多个操作菜单，可以通过TnSwipeAction的exclusive属性设置为false，则可以同时打开多个操作菜单

vue
<template>
  <TnSwipeAction :exclusive="false">
    <TnSwipeActionItem v-for="i in 3" :key="i" :options="options">
      <view class="swipe-action-item-demo tn-flex-center"> 图鸟UI </view>
    </TnSwipeActionItem>
  </TnSwipeAction>
</template>
<template>
  <TnSwipeAction :exclusive="false">
    <TnSwipeActionItem v-for="i in 3" :key="i" :options="options">
      <view class="swipe-action-item-demo tn-flex-center"> 图鸟UI </view>
    </TnSwipeActionItem>
  </TnSwipeAction>
</template>

API ​

SwipeAction Props ​

属性名说明类型默认值可选值
exclusive只允许一个 item 处于打开状态Booleantruefalse
auto-close自动关闭菜单，当TnSwipeActionItem选中了 option 操作后自动关闭滑出的菜单Booleantruefalse

SwipeAction Emits ​

事件名说明类型
open操作菜单滑动打开事件(index: number) => void
select操作菜单选项选中事件(index: number, optionIndex: number) => void

SwipeAction Slots ​

插槽名说明子标签
default自定义内容TnSwipeActionItem

SwipeActionItem Props ​

属性名说明类型默认值可选值
options菜单配置项SwipeActionItemOption--
auto-close自动关闭菜单，当TnSwipeActionItem选中了 option 操作后自动关闭滑出的菜单Booleantruefalse
disabled是否禁用Booleanfalsetrue
threshold滑动阈值，单位 px，大于该值则滑动动作生效Number20-

SwipeActionItem Slots ​

插槽名说明
default自定义内容

SwipeActionItemOption = SwipeActionItemOptionItem[] ​

SwipeActionItemOptionItem ​

属性名说明类型默认值可选值必填
text菜单文字String--否
icon菜单图标String-图标有效值否
textColor菜单字体颜色，支持图鸟内置的颜色值、hex、rgb、rgbaString--否
bgColor菜单背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgbaString--否
disabled禁止点击Booleanfalsetrue否
round显示为圆形菜单Booleanfalsetrue否

Tuniao UI

Copyright © 2019-present Evan You,Made with ❤️ by Tuniao UI