TUI

0.3.7
Dropdown 下拉选项选择
下拉选择, 可用于代替Select组件, 提供更优雅的交互效果
基础用法
默认空缺文案展示、自定义空缺图标
示例代码
vue
<template>
  <TsDropdown :list="dropList" v-model="dropValue" />
</template>

<script setup lang="ts">
  const dropValue = ref(1);
  const dropList = [
    { label: '选项1', value: 1 },
    { label: '选项2', value: 2 },
    { label: '选项3', value: 3 },
  ]
  
</script>
icon插槽
拓展下拉交互图标
示例代码
vue
<template>
  <TsDropdown v-model="dropValue" :nowrap="true" width="320" :list="exampleData.expandData[0].dropList">
    <template #icon>
      <BussinessIcon name="timeszicon-xiasanjiao" font-size="16" />
    </template>
  </TsDropdown>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  const dropValue = ref(1);
  const dropList = [
    { label: '选项1', value: 1 },
    { label: '选项2', value: 2 },
    { label: '选项3', value: 3 },
  ]
  
</script>
属性 Props
属性名
说明
类型
可选值
默认值
v-model
绑定值
String, Number, undefined
-
-
list
下拉选项数据
Array<DropdownListItem>
-
[]
disabled
是否禁用
Boolean
-
false
nowrap
是否换行
Boolean
-
false
width
下拉选项宽度
String, Number
-
260
position
下拉选项位置
String
bottom-start / top-start / bottom-end / top-end / left-center / right-center / left-top / right-top / left-bottom / right-bottom
bottom-start
icon
下拉选项图标
String
-
-
DropdownListItem Expand
属性名
说明
类型
可选值
默认值
label
选项label
string
-
value
选项value
number
-
disabled
是否禁用
Boolean
-
false
desc
选项描述
string
-
hidden
是否隐藏
Boolean
-
false