tnuiv3p-tn-dropdown v1.0.3

图鸟 UI vue3 uniapp Plugins - 下拉框

Tuniao UI vue3官方仓库

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

组件安装

npm i tnuiv3p-tn-dropdown

组件位置

tnuiv3p-tn-dropdown/index.vue

平台差异说明

基础使用

• 通过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

Event