ThorUI文档

# tui-actionsheet 操作菜单

介绍

可加入提示信息，可单独设置字体样式。

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiActionsheet from "@/components/thorui/tui-actionsheet/tui-actionsheet.vue"
export default {
	components:{
		tuiActionsheet
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

# uni-app版本平台差异说明

App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 App-Nvue
√ √ √ √ √ √ √ 升级中

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-actionsheet": "/components/thorui/tui-actionsheet/tui-actionsheet"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

默认使用

通过 show 属性控制显示隐藏，item-list 属性传入菜单列表。

<!--uni-app-->
<tui-actionsheet  
  :show="showActionSheet" 
  :item-list="itemList" 
  @click="itemClick" 
  @cancel="closeActionSheet">
</tui-actionsheet>

<!--微信小程序-->
<tui-actionsheet  
  show="{{showActionSheet}}" 
  item-list="{{itemList}}" 
  bindclick="itemClick" 
  bindcancel="closeActionSheet">
</tui-actionsheet>

// data 数据
{
	showActionSheet: false,
	itemList: [{
			text: "评论",
			color: "#2B2B2B"
		}, {
			text: "分享",
			color: "#2B2B2B"
		}]
}
添加提示信息

通过 tips 属性添加操作菜单提示信息。

<!--uni-app-->
<tui-actionsheet  
  :show="showActionSheet" 
  :item-list="itemList" 
  tips="退出登录会清除您的登录信息，确认退出吗？"
  @click="itemClick" 
  @cancel="closeActionSheet">
</tui-actionsheet>

<!--微信小程序-->
<tui-actionsheet  
  show="{{showActionSheet}}" 
  item-list="{{itemList}}" 
  tips="退出登录会清除您的登录信息，确认退出吗？"
  bindclick="itemClick" 
  bindcancel="closeActionSheet">
</tui-actionsheet>

// data 数据
{
	showActionSheet: false,
	itemList:[{
			text: "退出登录",
			color: "#E3302D"
		}]
}

# Slots

none

# 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

# Events

事件名 说明 回调参数
click 菜单按钮点击事件 {
  index: Number按钮索引值,
   ...itemList[index]:按钮obj对象
}
cancel 关闭操作菜单事件 -

# 预览

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码

← tui-numberbox 数字框 →