组件库文档 tmui.design
下拉选项 Dropdown
用来制作下拉菜单,选项等。
🌶️ 下拉选项 Dropdown 示例
查看模拟效果+
示例模板
vue
<template>
<tm-app>
<tm-sheet>
<tm-text :fontSize="24" _class="text-weight-b" label="基础属性,更多玩法请前往文档。"></tm-text>
<tm-divider></tm-divider>
<view class="flex flex-between flex-row px-32">
<tm-dropdown position="bl" color="grey-darken-4" :width="220" :list="list">
<tm-text label="显示菜单"></tm-text>
</tm-dropdown>
<tm-dropdown :width="220" color="red" :list="list">
<tm-text label="样式1"></tm-text>
</tm-dropdown>
<tm-dropdown position="br" :width="220" color="primary" linear="bottom" linearDeep="accent" :list="list">
<tm-text label="右对齐"></tm-text>
</tm-dropdown>
</view>
</tm-sheet>
</tm-app>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance } 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 tmDropdown from '@/tmui/components/tm-dropdown/tm-dropdown.vue'
import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
const list = ref([
{ text: '苹果', id: '1', icon: 'tmicon-collection' },
{ text: '菠萝', id: '2', icon: 'tmicon-account-plus' },
{ text: '电话', id: '3', icon: 'tmicon-phone' }
])
</script>
🌶️ 兼容性
APP-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
---|---|---|---|---|
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
本组件含有公共属性 公共属性
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
text | String | '' | 下拉选项的标题 |
iconColor | String | '' | 下拉选项的图标颜色 |
icon | String | '' | 下拉选项的图标 |
border | [Number,String] | 0 | |
round | [Number,String] | 3 | 圆角0-25,单位rpx |
transprent | [Boolean,String] | false | 是否透明 |
color | String | 'white' | |
width | Number | 0 | 宽度,单位rpx |
position | String | bc | tl上左,tc中,tr右。bc下左,bl中,br右。 |
list | Array | [] | 下拉选项的数据,格式见下方 |
rangKey | String | "text" | |
disabled | Boolean | false | 是否禁用 |
haveArrow | Boolean | true | 是否显示右箭头。 |
list数组数据格式:
ts
export interface itemList {
text:string,
iconColor?:string,
icon?:string,
[prop:string]:any
}
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
click | index: index, data: {} | 点击事件 |
🌽 slot插槽
默认default
🥗 ref方法
无
方法名 | 参数 | 返回值 | 描述 |
---|