# 滑动菜单

swipeAction滑动菜单:actions长度为0时,插槽可直接自定义操作菜单按钮。

# 组件结构

<template>
	<view class="tui-swipeout-wrap">
		<view
			class="tui-swipeout-item"
			:class="[isShowBtn ? 'swipe-action-show' : '']"
			@touchstart="handlerTouchstart"
			@touchmove="handlerTouchmove"
			@touchend="handlerTouchend"
			:style="{ transform: 'translate(' + position.pageX + 'px,0)' }"
		>
			<view class="tui-swipeout-content"><slot name="content"></slot></view>
			<view class="tui-swipeout-button-right-group" v-if="actions.length > 0" @touchend.stop="loop">
				<view
					class="tui-swipeout-button-right-item"
					v-for="(item, index) in actions"
					:key="index"
					:style="{ backgroundColor: item.background || '#f7f7f7', color: item.color, width: item.width + 'px' }"
					:data-index="index"
					@tap="handlerButton"
				>
					<image :src="item.icon" v-if="item.icon" :style="{ width: px(item.imgWidth), height: px(item.imgHeight) }"></image>
					<text :style="{ fontSize: px(item.fontsize) }">{{ item.name }}</text>
				</view>
			</view>
			<!--actions长度设置为0,可直接传按钮进来-->
			<view
				class="tui-swipeout-button-right-group"
				@touchend.stop="loop"
				@tap="handlerParentButton"
				v-if="actions.length === 0"
				:style="{ width: operateWidth + 'px', right: '-' + operateWidth + 'px' }"
			>
				<slot name="button"></slot>
			</view>
		</view>
		<view v-if="isShowBtn && showMask" class="swipe-action_mask" @tap.stop="closeButtonGroup" @touchstart.stop.prevent="closeButtonGroup"/>
	</view>
</template>

# 组件脚本

<script>
	export default {
		name: "tuiSwipeAction",
		
		...省略n行
		
	}
</script>

# 组件样式

... 此处省略n行

# 脚本说明

# props

参数 类型 描述 默认值
actions Array 操作按钮 []
closable Boolean 点击按钮时是否自动关闭 true
showMask Boolean 设为false,可以滑动多行不关闭菜单 true
operateWidth Number 按钮宽度 单位px 80
params Object 自定义参数,点击按钮回传 {}
forbid Boolean 禁止滑动 false
open Boolean 手动开关 false
backgroundColor String 背景色 #fff

# actions详细

名称 描述
name 操作名称
color 字体颜色
fontsize 字体大小
width 宽度
icon 图标地址
background 背景色

# methods

名称 描述
@click 按钮点击事件

# 示例

# H5预览地址

https://www.thorui.cn/h5/#/pages/extend/swipeAction/swipeAction

# H5二维码

# 小程序二维码