# ActionSheet

操作菜单:可加入提示信息,可单独设置字体样式。

# 组件结构

<template>
	<view @touchmove.stop.prevent>
		<view class="tui-actionsheet" :class="{'tui-actionsheet-show':show,'tui-actionsheet-radius':radius}">
			<view class="tui-actionsheet-tips" :style="{fontSize:size+'rpx',color:color}" v-if="tips">
				{{tips}}
			</view>
			<view :class="[isCancel?'tui-operate-box':'']">
				<block v-for="(item,index) in itemList" :key="index">
					<view class="tui-actionsheet-btn tui-actionsheet-divider" :class="{'tui-btn-last':!isCancel && index==itemList.length-1}"
					 hover-class="tui-actionsheet-hover" :hover-stay-time="150" :data-index="index" :style="{color:item.color || '#2B2B2B'}"
					 @tap="handleClickItem">{{item.text}}</view>
				</block>
			</view>
			<view class="tui-actionsheet-btn tui-actionsheet-cancel" hover-class="tui-actionsheet-hover" :hover-stay-time="150"
			 v-if="isCancel" @tap="handleClickCancel">取消</view>
		</view>
		<view class="tui-actionsheet-mask" :class="{'tui-mask-show':show}" @tap="handleClickMask"></view>
	</view>
</template>

# 组件脚本

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

# 组件样式

... 此处省略n行

# 脚本说明

# props

参数 类型 描述 默认值
maskClosable Boolean 点击遮罩 是否可关闭 true
show Boolean 控制显示隐藏操作菜单 false
itemList Array 菜单按钮数组 [{text: "确定",color: "#2B2B2B"}]
tips String 提示信息 ''
color String 提示信息文字颜色 #808080
size Number 提示文字大小 26
radius Boolean 是否需要圆角 true
isCancel Boolean 否需要取消按钮 true

# methods

名称 描述
@click 菜单按钮点击事件
@cancel 关闭操作菜单事件

# 示例

# H5预览地址

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

# H5二维码

# 小程序二维码