组件库文档 tmui.design
底部操作栏
从底部弹出的快速操作菜单栏,对于单项可选项目操作,非常有用,且便利。
🌶️ 底部操作 actionMenu 栏示例
查看模拟效果+
示例模板
vue
<template>
<tm-app>
<tm-sheet>
<tm-text :fontSize="24" _class="font-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 | 点击取消时触发 |
list[]格式为listitem 如下:
ts
interface listitem {
text ? : string,
disabled ? : boolean,
// 选项菜单按钮的open-type,同各家小程序的一样的参数。
openType ? : string,
[prop: string]: any;
}
🌽 slot插槽
默认default,可触发弹层的插槽占位内容,比如在里面布局按钮,输入框,点击这块内容可以直接显示弹层。
🥗 ref方法
无
方法名 | 参数 | 返回值 | 描述 |
---|