目录
#平台差异说明
#基本使用
#配置顶部的提示信息和底部取消按钮
#如何知道点了第几项
#API
#Props
#Event
本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。
本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
#平台差异说明
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | √ |
#基本使用
- 通过
list设置需要显示的菜单，该值为一个数组，元素为对象，对象至少要提供text属性，另外可选的有fontSize(字体大小)，color(颜色)，disabled(是否禁用，1.5.6引入)，subText(描述信息，1.6.8引入) - 通过
v-model绑定一个值为布尔值的变量控制组件的弹出与收起，v-model的值是双向绑定的
<template>
<view>
<u-action-sheet :list="list" v-model="show"></u-action-sheet>
<u-button @click="show = true">打开ActionSheet</u-button>
</view>
</template>
<script>
export default {
data() {
return {
list: [{
text: '点赞',
color: 'blue',
fontSize: 28,
subText: '感谢您的点赞'
}, {
text: '分享'
}, {
text: '评论'
}],
show: false
}
}
}
</script>
#配置顶部的提示信息和底部取消按钮
-
tips参数为一个对象类型，属性可以设置text，fontSize(字体大小)，color(颜色)，文本内容将会显示组件的上方，起提示作用。 -
cancel-btn参数配置是否显示底部的取消按钮，默认显示
<template>
<u-action-sheet :list="list" v-model="show" :tips="tips" :cancel-btn="true"></u-action-sheet>
</template>
<script>
export default {
data() {
return {
tips: {
text: '在水一方',
color: '#909399',
fontSize: 24
},
list: [{
text: '点赞',
color: 'blue',
fontSize: 28
}],
show: true
}
}
}
</script>
#如何知道点了第几项
click回调事件带有一个index值，这个索引值为传递的list数组的索引值，根据回调事件，能获得点击了 第几项和该项的内容文章来源：https://www.toymoban.com/news/detail-814408.html
<template>
<u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
</template>
<script>
export default {
data() {
return {
list: [{
text: '点赞',
color: 'blue',
fontSize: 28
}, {
text: '分享'
}, {
text: '评论'
}],
show: true
}
},
methods: {
click(index) {
console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`)
}
}
}
</script>
#API
#Props
注意：props中没有控制组件弹出与收起的参数，因为这是通过v-model绑定变量实现的，见上方说明。文章来源地址https://www.toymoban.com/news/detail-814408.html
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| list | 按钮的文字数组，见上方文档示例 | Array<Object> | [ ] | - |
| tips | 顶部的提示文字，见上方文档示例 | Object | - | - |
| cancel-btn | 是否显示底部的取消按钮 | Boolean | true | false |
| border-radius | 弹出部分顶部左右的圆角值，单位rpx | Number \ String | 0 | - |
| mask-close-able | 点击遮罩是否可以关闭 | Boolean | true | false |
| safe-area-inset-bottom | 是否开启底部安全区适配 | Boolean | false | true |
| z-index |
z-index值 |
Number \ String | 1075 | - |
| cancel-text 1.3.0 | 取消按钮的提示文字 | String | 取消 | - |
#Event
| 事件名 | 说明 | 回调参数 | 版本 |
|---|---|---|---|
| click | 点击ActionSheet列表项时触发 | index: 点击了第几个，从0开始 | - |
| close | 点击取消按钮时触发 | - | - |
到了这里，关于uniapp中uview组件库丰富的ActionSheet 操作菜单使用方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
