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 属性传入菜单列表。

注：点取消按钮时，会触发cancel事件，需要在事件内将show属性值设置为false来隐藏组件

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

// data 数据 及 方法
export default {
   data() {
   	return {
   		showActionSheet: false,
   		itemList: [{
   			text: "评论",
   			color: "#2B2B2B"
   		}, {
   			text: "分享",
   			color: "#2B2B2B"
   		}]
   	}
   },
   methods: {
   	//隐藏组件
   	closeActionSheet: function() {
   		this.showActionSheet = false
   	},
   	//调用此方法显示组件
   	openActionSheet: function(type) {
   		this.showActionSheet = true;
   	},
   	itemClick: function(e) {
   		console.log(e)
   		let index = e.index;
   		this.closeActionSheet();
   		this.tui.toast(`您点击的按钮索引为：${index}`)
   	}
   }
}

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

// data 数据 及 方法
//请自行将此js引入到项目中并确保路径正确
import tui from '../../../common/httpRequest'
Page({
  data: {
    showActionSheet: false,
    itemList: [{
   	text: "评论",
   	color: "#2B2B2B"
    }, {
   	text: "分享",
   	color: "#2B2B2B"
    }]
  },
  //隐藏组件
  closeActionSheet: function() {
    this.setData({
      showActionSheet: false
    })
  },
  //调用此方法打开组件
  openActionSheet: function(e) {
    this.setData({
      showActionSheet: true
    })
  },
  itemClick: function(e) {
    console.log(e.detail)
    let index = e.detail.index;
    this.closeActionSheet();
    tui.toast(`您点击的按钮索引为：${index}`)
  }
})

// Make sure to add code blocks to your code group

添加提示信息

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

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

// data 数据 及 方法
export default {
  data() {
  	return {
  		showActionSheet: false,
  		itemList: [{
  		  text: "退出登录",
  		  color: "#E3302D"
  	   }]
  	}
  },
  methods: {
  	//隐藏组件
  	closeActionSheet: function() {
  		this.showActionSheet = false
  	},
  	//调用此方法打开组件
  	openActionSheet: function(type) {
  		this.showActionSheet = true;
  	},
  	itemClick: function(e) {
  		console.log(e)
  		let index = e.index;
  		this.closeActionSheet();
  		this.tui.toast(`您点击的按钮索引为：${index}`)
  	}
  }
}

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

// data 数据 及 方法
import tui from '../../../common/httpRequest'
Page({
  data: {
    showActionSheet: false,
    itemList: [{
  		text: "退出登录",
  		color: "#E3302D"
  	}]
  },
  //隐藏组件
  closeActionSheet: function() {
    this.setData({
      showActionSheet: false
    })
  },
  //调用此方法打开组件
  openActionSheet: function(e) {
    this.setData({
      showActionSheet: true
    })
  },
  itemClick: function(e) {
    console.log(e.detail)
    let index = e.detail.index;
    this.closeActionSheet();
    tui.toast(`您点击的按钮索引为：${index}`)
  }
})

// Make sure to add code blocks to your code group

Slots

插槽名称	插槽说明
-	-

Props

属性名	类型	说明	默认值
show	Boolean	控制显示隐藏操作菜单	false
itemList	Array	菜单按钮数组	[{text: "确定",color: "#2B2B2B"}]
maskClosable	Boolean	点击遮罩 是否可关闭	true
maskColor V2.1.0+	String	遮罩颜色	rgba(0, 0, 0, 0.6)
tips	String	提示信息	-
color	String	提示信息文字颜色	#808080
size	Number	提示文字大小	26
radius	Boolean	是否需要圆角	true
isCancel	Boolean	否需要取消按钮	true
zIndex V2.1.0+	Boolean	z-index 值	998

Events

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

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

预览

特别说明

• 该组件为 开源组件，uni-app版所有用户均可免费使用。
• 微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

线上程序扫码预览

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