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>

// data 数据 及 方法
export default {
	data() {
		return {
			dropdownShow: false
		}
	},
	methods: {
		//调用此方法显示隐藏下拉列表
		dropDownList: function() {
			this.dropdownShow = !this.dropdownShow
		}
	}
}

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

// data 数据 及 方法
Page({
  data: {
	dropdownShow: false  
  },
  //调用此方法显示隐藏下拉列表
  dropDownList: function() {
	  this.setData({
		  dropdownShow:!this.data.dropdownShow
	  })
  }
})

// Make sure to add code blocks to your code group

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

Events

注：uni-app端绑定事件使用@前缀，如@close；微信小程序原生使用bind前缀，如bindclose

事件名	说明	回调参数
close V2.10+	点击遮罩时触发，关闭逻辑需要自行在页面处理	-

预览

特别说明

• 该组件为 开源组件，uni-app版所有用户均可免费使用。
• 微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码