更新记录

1.0.2(2024-05-08) 下载此版本

调整样式

1.0.1(2024-05-08) 下载此版本

样式调整

1.0.0(2024-05-07) 下载此版本

1.0.0

查看更多

平台兼容性

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

tf-drop-down-menu

  1. 组件作用
    • 下拉菜单(支持数据项为对象的形式)
    • 此组件是基于uview/u-dropdown源码基础上二次更改的,主要调整了样式,暴露出item插槽,需要自己填入u-dropdown-item用例如下
  2. 组件引用例子
<template>
    <view class="content">
        <TfDropDownMenu>
            <template #item>
                <u-dropdown-item height="50vh" v-model="value1" title="距离" :options="options1" @change="change">
                </u-dropdown-item>
                <u-dropdown-item height="50vh" v-model="value2" title="温度" :options="options2" @change="change">
                </u-dropdown-item>
            </template>
        </TfDropDownMenu>
    </view>
</template>

<script>
    import TfDropDownMenu from '../../uni_modules/tf-drop-down-menu/components/tf-drop-down-menu/tf-drop-down-menu.vue'
    export default {
        components: {
            TfDropDownMenu
        },
        data() {
            return {
                value1: 11,
                value2: 112,
                options1: [{
                        label: '默认排序',
                        value: 11,
                    },
                    {
                        label: '距离优先',
                        value: 21,
                    }
                ],
                options2: [{
                        label: '去冰',
                        value: 112,
                    },
                    {
                        label: '加冰',
                        value: 211,
                    },
                ]
            }
        },
        methods:{
            change(e) {
                console.log('222',e)
            }
        }
    }
</script>

<style scoped>
</style>
  1. 主要属性说明
属性名 类型 默认值 说明
activeColor String '#085699' tab项标题和选项的激活态颜色
inactiveColor String '#333333' tab项标题和选项的未激活态颜色
activeBgColor String '#ECF5FF' tab项激活态背景颜色
inactiveBgColor String '#ffffff' tab项未激活态背景颜色
height Number, String 70 tab项的高度,单位任意,数值默认为rpx单位
titleSize Number, String 28 tab项的字体大小
menuIcon String 'arrow-down' tab项右侧的icon图标,可选值 'arrow-down','arrow-down-fill'
  1. 主要方法说明
事件名 说明 回调参数
open 打开下拉选项事件 index:当前激活索引
close 关闭下拉选项事件 index:当前激活索引

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

暂无用户评论。

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