更新记录

1.0.0(2020-08-16) 下载此版本


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

简介

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

demo

源码:https://github.com/yapeee/uni-ms-dropdown

基础用法

<template>
    <view>
        <ms-dropdown-menu>
            <ms-dropdown-item v-model="value1" :list="list"></ms-dropdown-item>
            <!-- <ms-dropdown-item v-model="value2" :list="list"></ms-dropdown-item> -->
            <ms-dropdown-item v-model="value2" :list="list">
                <view slot="title">
                    <view class="dropdown-item-title">
                        <view class="title">自定义title</view>
                        <view class="btn">打开</view>
                    </view>
                </view>
            </ms-dropdown-item>
            <ms-dropdown-item v-model="value3" :hasSlot="true" title="自定义下拉框内容" ref="dropdownItem">
                <view class="dropdown-item-content">
                    <view>=====此为测试内容=====</view>
                    <view class="btn" @click="choose">输出:test</view>
                    <view class="btn" @click="close">关闭</view>
                </view>
            </ms-dropdown-item>
        </ms-dropdown-menu>
        <view>输出:{{value1}}</view>
        <view>输出:{{value2}}</view>
        <view>输出:{{value3}}</view>
    </view>
</template>

<script>
    import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
    import msDropdownItem from '@/components/ms-dropdown/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: 'init'
            }
        },
        watch: {
        },
        mounted() {
        },
        methods: {
            choose() {
                let obj = {
                    value: 'test'
                }
                this.$refs.dropdownItem.choose(obj)
            },
            close() {
                this.$refs.dropdownItem.closePopup()
            }
        }
    }
</script>

属性说明

DropdownItem Props

参数 说明 类型 默认值
value 当前选中项对应的 value,可以通过v-model双向绑定 number | String | Object -
list 选项数组 Option[] []
title 自定义标题字符串 String $uni-color-primary

Option 数据结构

键名 说明 类型
text 文字 string
value 标识符 string | number | Object

DropdownItem Slots

名称 说明
default 菜单内容
title 自定义标题

方法说明

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

方法称名 说明
choose 输出value
closePopup 关闭下拉框

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问