tnuiv3p-tn-dropdown

图鸟 UI vue3 uniapp Plugins - 下拉框

Tuniao UI vue3官方仓库

该组件一般用于点击之后在下拉框中展示内容的场景

组件安装

npm i tnuiv3p-tn-dropdown

组件位置

tnuiv3p-tn-dropdown/index.vue

平台差异说明

App(vue)	H5	微信小程序	支付宝小程序	...
√	√	√	√	适配中

基础使用

• 通过open属性控制下拉框的显示和隐藏

<script setup lang="ts">
import { ref } from 'vue'
import TnDropdown from 'tnuiv3p-tn-dropdown/index.vue'

const openDropdown = ref<boolean>(false)

// 选项点击事件
const menuItemClickHandle = () => {
  openDropdown.value = true
}
</script>

<template>
  <TnDropdown v-model:open="openDropdown">
    <template #menu>
      <view class="dropdown-menu">
        <view class="dropdown-menu-item" @tap.stop="menuItemClickHandle">
          选项一
        </view>
        <view class="dropdown-menu-item" @tap.stop="menuItemClickHandle">
          选项二
        </view>
        <view class="dropdown-menu-item" @tap.stop="menuItemClickHandle">
          选项三
        </view>
      </view>
    </template>
    <view class="dropdown-content"> 下拉内容 </view>
  </TnDropdown>
</template>

<style lang="scss" scoped>
.dropdown-menu {
  position: relative;
  width: 100%;
  margin-top: 500rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;

  .dropdown-menu-item {
    flex: 1;
    background-color: var(--tn-color-gray-light);
    padding: 20rpx 0rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    & + .dropdown-menu-item {
      margin-left: 16rpx;
    }
  }
}

.dropdown-content {
  position: relative;
  width: 100%;
  height: 500rpx;
  background-color: var(--tn-color-white);
}
</style>

设置内容的高度

• 通过height属性可以设置下拉框内容容器的高度，当内容的高度比容器高度高是，内容则会滚动。

<template>
  <TnDropdown v-model:open="openDropdown" height="400">
    <template #menu>
      <view class="dropdown-menu">
        <view class="dropdown-menu-item" @tap.stop="menuItemClickHandle">
          选项一
        </view>
        <view class="dropdown-menu-item" @tap.stop="menuItemClickHandle">
          选项二
        </view>
        <view class="dropdown-menu-item" @tap.stop="menuItemClickHandle">
          选项三
        </view>
      </view>
    </template>
    <view class="dropdown-content"> 下拉内容 </view>
  </TnDropdown>
</template>

API

Props

参数	说明	类型	默认值	可选值
open/v-model:open	下拉菜单打开状态	Boolean	false	true
bg-color	背景颜色，以tn开头使用图鸟内置的颜色	String	#fff	-
height	下拉框的高度，如果不设置则根据框的高度自适应，默认单位rpx	String	-	-
overlay	是否显示遮罩	Boolean	true	false
border-radius	下拉框是否带圆角	Boolean	true	false
shadow	下拉框内容显示阴影	Boolean	false	true
menu-content-gap	下拉菜单和内容之间的距离，默认单位rpx	String	-	-
z-index	zIndex	Number	999	-

Event

事件名	说明	回调参数
close	下拉框关闭时触发	-