SwipeAction 滑动操作 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用

滑动操作组件。
结合手势操作，从屏幕一侧唤出操作。

规则

一次只可滑动一行列表
容器内点击任意按钮之外处或往回滑动该列表可隐藏操作。

引入方式

数字生活小程序工程中，不需要 import，直接使用组件标签即可。

import { SwipeAction, SwipeActionItem, SwipeActionButton } from '@21cnfe/vui'  
Vue.component('SwipeAction', SwipeAction)  
Vue.component('SwipeActionItem', SwipeActionItem)  
Vue.component('SwipeActionButton', SwipeActionButton)

代码演示

SwipeAction 滑动操作 swipeActions

基本用法 SwipeAction 为容器，SwipeActionItem 为一行列表，SwipeActionButton 为列表操作按钮

<SwipeAction>
  <SwipeActionItem title="Only right buttons" extra="More" @onClick="clickItem">
    <div slot="right">
      <SwipeActionButton @onClick="handleDefault" />
      <SwipeActionButton type="warning" text="warning" @onClick="handleWarning" />
    </div>
  </SwipeActionItem>
</SwipeAction>

列表项内容列表项内容可以通过传入内置属性渲染内容，也可通过 content 插槽插入自定义内容

// 通过内置 title、extar 属性传入列表项内容
<SwipeActionItem title="Only right buttons" extra="More" @onClick="clickItem">
</SwipeActionItem>
// 通过 content 插槽传入自定义内容
<SwipeActionItem @onClick="clickItem">
  <div slot="content">
    <div>title</div>
    <div>extra</div>
  </div>
</SwipeActionItem>

按钮菜单按钮菜单分为左右两种，分别是 SwipeActionItem 的 left 插槽与 right 插槽

<SwipeAction>
  <SwipeActionItem title="Have right and left buttons" extra="More" @onClick="clickItem">
    <div slot="left">
      <SwipeActionButton type="primary" text="primary" @onClick="handlePrimay" />
      <SwipeActionButton @onClick="handleDefault" />
    </div>
    <div slot="right">
      <SwipeActionButton type="warning" text="warning" @onClick="handleWarning" />
      <SwipeActionButton @onClick="handleDefault" />
    </div>
  </SwipeActionItem>
</SwipeAction>

按钮内容组件中按钮内置三种样式，默认为 default, text 属性修改按钮文本

<SwipeActionButton type="default" text="按钮文本" />
<SwipeActionButton type="warning" text="按钮文本" />
<SwipeActionButton type="primary" text="按钮文本" />

API

SwipeActionItem

属性	说明	类型	默认值
`title`	列表项标题	String	`--`
`extra`	列表项备注	String	`--`

SwipeActionButton

属性	说明	类型	默认值
`type`	按钮类型，可选值为 [`deafult`, `warning`, `primary`]	String	`default`
`text`	按钮文本	String	`--`

Event

SwipeActionItem

事件名称	说明	回调参数
`onClick`	列表项点击事件	void()

SwipeActionButton

事件名称	说明	回调参数
`onClick`	按钮点击事件	void()

Slot

SwipeAction

属性	说明
`匿名插槽`	插入子组件 `SwipeActionItem`

SwipeActionItem

属性	说明
`content`	插入自定义列表项内容
`right`	插入右侧按钮菜单
`left`	插入左侧按钮菜单

1. SwipeAction 滑动操作 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

SwipeAction 滑动操作 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

规则

引入方式

代码演示

API

SwipeActionItem

SwipeActionButton

Event

SwipeActionItem

SwipeActionButton

Slot

SwipeAction

SwipeActionItem

SwipeAction 滑动操作 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用