更新记录

1.0.4(2022-06-10) 下载此版本

兼容字节跳动小程序 修复App蒙层下无法点击

1.0.3(2022-05-28) 下载此版本

结构新增key, 返回的时候会返回key和value,对自己的数据进行赋值,然后刷新后台接口

1.0.2(2022-04-27) 下载此版本

修复蒙层穿透问题 减小ICON引入体积

查看更多

平台兼容性

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

yang-dropdown

在template中使用组件

<yang-dropdown activeColor="red"  :filterData="filterData" @change="handChange" />

在script引用组件

<script setup>
    import {
        ref
    } from 'vue'
    const filterData = ref([{
        "name": '首付金额',
        "key": 'first_amount',
        "select": 0,
        "submenu": [{
            "label": "首付金额",
            "value": [],
        }, {
            "label": "0首付",
            "value": [0, 0]
        }, {
            "label": "0-5000元",
            "value": [0, 4999]
        }, {
            "label": "5000-10000元",
            "value": [5000, 10000]
        }, {
            "label": "10000以上",
            "value": [10000, '']
        }]
    }, {
        "name": '车价',
        "key": 'real_price',
        "select": 0,
        "submenu": [{
            "label": "车价",
            "value": [],
        }, {
            "label": "10万以内",
            "value": [0, 99999],
        }, {
            "label": "10-15万",
            "value": [100000, 149999],
        }, {
            "label": "15万以上",
            "value": [150000, ''],
        }]
    }, {
        "name": '动力',
        "key": 'power',
        "select": 0,
        "submenu": [{
            "label": "动力",
            "value": '',
        }, {
            "label": "纯电",
            "value": "纯电"
        }, {
            "label": "插电混动",
            "value": '插电混动',
        }]
    }])
    const handChange = (e) => {
        e.forEach(el => {
            queryForm.value[el.labelKey] = el.value
        })
        onRefresh() //  重新请求后台接口刷新列表
    }
</script>

paging 属性说明

属性名 类型 默认值 详细说明
filterData Array [] 需要展示的数据
maxHeight Number 500 选择区域最大高度
tabsHeight Number 80 组件高度
isSticky Boolean true 是否吸顶
stickyTop String '0' 吸顶距离顶部高度
bgColor String #fff tabs背景颜色
mainBgColor String #fff 选择区域背景颜色
activeColor String #4EC65E 选中字体颜色
color String #333 字体默认颜色

事件说明

事件名 说明
@change 选中的数据

End

隐私、权限声明

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

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

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

许可协议

MIT协议

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