Skip to content
12:13

图鸟 UI vue3 uniapp 插件 - 下拉框

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

仓库地址

Github

npmjs

组件安装

bash
npm i tnuiv3p-tn-dropdown
npm i tnuiv3p-tn-dropdown
bash
pnpm add tnuiv3p-tn-dropdown
pnpm add tnuiv3p-tn-dropdown
bash
yarn i tnuiv3p-tn-dropdown
yarn i tnuiv3p-tn-dropdown

组件位置

typescript
import TnDropdown from 'tnuiv3p-tn-dropdown/index.vue'
import TnDropdown from 'tnuiv3p-tn-dropdown/index.vue'

平台差异说明

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

基础使用

  • 通过open属性控制下拉框的显示和隐藏
vue
<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>
<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属性可以设置下拉框内容容器的高度,当内容的高度比容器高度高是,内容则会滚动。
vue
<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>
<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下拉菜单打开状态Booleanfalsetrue
bg-color背景颜色,以 tn 开头使用图鸟内置的颜色String#fff-
height下拉框的高度,如果不设置则根据框的高度自适应,默认单位rpxString--
overlay是否显示遮罩Booleantruefalse
border-radius下拉框是否带圆角Booleantruefalse
shadow下拉框内容显示阴影Booleanfalsetrue
menu-content-gap下拉菜单和内容之间的距离,默认单位rpxString--
z-indexzIndexNumber999-

Event

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

Tuniao UI