组件库文档 tmui.design
底部操作栏
从底部弹出的快速操作菜单栏，对于单项可选项目操作，非常有用，且便利。
🌶️ 底部操作 actionMenu 栏示例
查看模拟效果＋
示例模板
vue
<template>
<tm-app>
<tm-sheet>
<tm-text :fontSize="24" _class="text-weight-b" label="基础属性,更多玩法请前往文档。"></tm-text>
<tm-divider></tm-divider>
<tm-button @click="show = true" label="显示操作栏" block></tm-button>
</tm-sheet>
<tm-action-menu @change="change" v-model="show" :list="list"></tm-action-menu>
</tm-app>
</template>
<script lang="ts" setup>
import { ref, Ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmActionMenu from '@/tmui/components/tm-action-menu/tm-action-menu.vue'
import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
import tmButton from '@/tmui/components/tm-button/tm-button.vue'
const show = ref(false)
const list: Ref<Tmui.actionMenu[]> = ref([
{ text: '苹果', id: '1' },
{ text: '菠萝', id: '2' },
{ text: '香蕉', id: '3' }
])
function change(item: Tmui.actionMenu, index: number) {
console.log('当前选中项目:', item, '索引:', index)
}
</script>🌶️ 兼容性
| APP-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
|---|---|---|---|---|
| ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
本组件含有公共属性 公共属性
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| list | Array | [] | [] |
| rangKey | String | 'text' | |
| modelValue | Boolean | false | |
| color | String | "white" | |
| activeFontColor | String | "primary" | 活动项的文字色，如果不提供使用默认 |
| active | Number | NaN | 当前的活动项 |
| allowClose | Boolean | true | 点按菜单后，是否允许关闭弹层。 |
| duration | Number | 250 | 弹层动画时长 |
🌹 事件
| 事件名 | 参数 | 返回数据 | 描述 |
|---|---|---|---|
| update:modelValue | false/true | v-model:显示和隐藏 | |
| change | listitem | 当点击项目时触发，返回(listitem,index)数据 | |
| cancel | 点击取消时触发 | ||
| open-data | 各自平台开放数据 | 开放事件，mp小程序上通过listitem中openType设置的开放数据事件触发，包括：选择头像，电话，分离，联系人等统一触发 |
list[]格式为listitem 如下：
ts
interface listitem {
text ? : string,
disabled ? : boolean,
// 选项菜单按钮的open-type，同各家小程序的一样的参数。
openType ? : string,
[prop: string]: any;
}🌽 slot插槽
默认default，可触发弹层的插槽占位内容，比如在里面布局按钮，输入框，点击这块内容可以直接显示弹层。
🥗 ref方法
无
| 方法名 | 参数 | 返回值 | 描述 |
|---|