uniapp可输入的下拉列表_【uni-app】自定义下拉框组件

简介

下拉选择框，通过v-model绑定下拉数组选中值。支持自定义下拉内容，输出指定内容。

demo

基础用法

=====此为测试内容=====

输出：test

关闭

输出：{{value1}}

输出：{{value2}}

输出：{{value3}}

import msDropdownMenu from '@/components/dropdown-select/dropdown-menu.vue'

import msDropdownItem from '@/components/dropdown-select/dropdown-item.vue'

export default {

components: {

msDropdownMenu,

msDropdownItem

},

props: {

},

data() {

return {

list: [

{

text: 'item1',

value: 0

},

{

text: 'item2',

value: 1

},

{

text: 'item3',

value: 2

}

],

value1: 0,

value2: 1,

value3: {

name: 'init'

}

}

},

watch: {

},

mounted() {

},

methods: {

choose() {

let obj = {

value: {

test: 1,

name: 'test'

}

}

this.$refs.dropdownItem.choose(obj)

},

close() {

this.$refs.dropdownItem.closePopup()

}

}

}

属性说明

DropdownItem Props

参数

说明

类型

默认值

value

当前选中项对应的 value，可以通过v-model双向绑定

number、String、Object

-

list

选项数组

Option[]

[]

title

自定义标题

String

$uni-color-primary

Option 数据结构

键名

说明

类型

text

文字

string

value

标识符

string、number、Object

方法说明

通过 ref 获取DropdownItem组件调用方法

方法称名

说明

choose

输出value

closePopup

关闭下拉框

实现方案

实现下拉框下拉效果

1.设置下拉框样式

/* 收起样式 */

transform: translateY(-100%);

transition: all .3s;

/* 展开样式 */

transform: translateY(0);

transition: all .3s;

2.设置下拉框展开收起的位置

this.getElementData('.dropdown-item__selected', (data)=>{

this.contentTop = data[0].bottom

})

该操作是为了设置下拉框的位置，使下拉框展开收起的动画效果在超出下拉框位置的时候就会隐藏。从而实现真正的从菜单按钮底部开始展开，收起结束的动画效果。

实现多个下拉框情况下只允许一个展开

该操作的实现主要是通过emit和on的通信来实现的。步骤如下：

1.点击DropdownItem组件，在展开下拉框之前，通过this.$parent.$emit('close')触发DropdownMenu组件的close事件；

2.DropdownMenu组件通过this.$on('close', this.closeDropdown)监听自定义事件；

3.DropdownMenu组件接收通知后，遍历DropdownItem组件，执行DropdownItem组件的close()方法

closeDropdown() {

this.$children.forEach(item =>{

item.close();

})

}

实现支持自定义下拉内容

可通过DropdownItem组件的slot插槽来实现自定义下拉框内容。通过ref定位DropdownItem组件，调用choose方法(输出value)和closePopup方法(收起下拉框)实现自定义下拉内容。