tui-dropdown-list 下拉列表

介绍

下拉列表，下拉选择框。

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiDropdownList from "@/components/thorui/tui-dropdown-list/tui-dropdown-list.vue"
export default {
	components:{
		tuiDropdownList
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看官网文档 (opens new window)。

# uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	√	√	√	√	√	√	√

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-dropdown-list": "/components/thorui/tui-dropdown-list/tui-dropdown-list"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

基础使用

通过 show 属性控制下拉列表的显示隐藏， top 属性设置下拉列表的top值，一般为 selectionbox 内容高度，height 属性设置下拉列表的高度。

<!--uni-app-->
<tui-dropdown-list :show="dropdownShow" :top="94" :height="400">
	<template v-slot:selectionbox>
		点击选择内容块
	</template>
	<template v-slot:dropdownbox>
		下拉列表内容
	</template>
</tui-dropdown-list>

<!--微信小程序-->
<tui-dropdown-list show="{{dropdownShow}}" top="{{94}}" height="{{400}}">
	<view slot="selectionbox">
		点击选择内容块
	</view>
	<view slot="dropdownbox">
		下拉列表内容
	</view>
</tui-dropdown-list>

# Slots

名称	说明
selectionbox	点击选择内容块，点击内容区整体放入此插槽内
dropdownbox	下拉列表内容，内容多可结合 scroll-view使用

# Props

参数	类型	说明	默认值
show	Boolean	控制显示	false
backgroundColor	String	背景颜色	transparent
top	Number	下拉框top值单位rpx	0
height	Number	下拉框高度单位rpx	0
selectHeight	Number	下拉框父容器高度单位rpx	0：表示auto
isMask V2.10+	Boolean	下拉框显示时是否显示遮罩	false
maskBackground V2.10+	String	下拉框遮罩背景色	transparent