LuLu UI Edge版中文文档 » Drop下拉列表

安装与调用

本组件依赖于 Drop 下拉，扩展了一个名为 list 的方法。

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/hope/ui/Drop/list.css">

<script type="module" src="https://qidian.gtimg.com/lulu/hope/ui/Drop/list.js"></script>

使用示意与指南

1. 基本效果演示

// 下拉导航链接列表
new Drop('.dlPage').list([{
    href: 'http://www.qidian.com/',
    value: '起点中文网',
    target: '_lulu'
}, {
    href: 'http://www.hongxiu.com/',
    value: '红袖添香',
    target: '_lulu'
}, {
    href: 'http://www.xs8.cn/',
    value: '言情小说吧',
    target: '_lulu',
    disabled: true
}, {
    value: '其他',
    data: [{
        href: 'http://www.qidian.com/',
        value: '1-起点中文网',
        target: '_lulu'
    }, {
        href: 'http://www.hongxiu.com/',
        value: '1-红袖添香',
        target: '_lulu'
    }, {
        value: '1-其他',
        data: [{
            href: 'http://www.qidian.com/',
            value: '2-起点中文网',
            target: '_lulu'
        }, {
            href: 'http://www.hongxiu.com/',
            value: '2-红袖添香',
            target: '_lulu'
        }]
    }]
}], {
    width: 100
});

// 评论筛选列表
new Drop(document.querySelector('#dlCom')).list([{
    id: 1,
    value: '所有评论'
}, {
    id: 2,
    value: '未通过评论'
}, {
    id: 3,
    value: '未审核评论'
}, {
    id: 4,
    value: '已通过评论'
}], {
    onSelect: function (obj) {
        console.log('选中的评论id是：' + obj.id);
    }
});

// 评论状态修改列表
new Drop('#dlDeal').list([{
    value: '<i class="icon_undeal"></i>未处理'
}, {
    value: '<i class="icon_pass"></i>已通过'
}, {
    value: '<i class="icon_unpass"></i>未通过'
}], {
    position: '7-5'
});

2. 动态列表数据+列表选择不会改变trigger元素

列表默认选中后会改变点击元素里面的内容，如果希望列表选择后按钮的内容不发生变化，可以设置selector参数的值为和当前点击元素的匹配的选择器即可。

// 基于数据的列表
new Drop(trigger).list(function () {
    return [...select.querySelectorAll('option')].map(function (option) {
        return {
            id: option.value,
            value: option.innerHTML,
            disabled: option.selected
        };
    });
}, {
    selector: 'button',
    onSelect: function (obj) {
        eleSelDropList.querySelector('option[value="' + obj.id + '"]').selected = true;
    }
});

3. <datalist>元素实现下拉列表

可以指向一个<datalist>元素实现。代码示意：

<ui-drop class="ui-button" type="primary" target="t6">点击我-空option</ui-drop>
<datalist id="t6">
    <option value="1">列表1</option>
    <option value="2">列表2</option>
    <!-- 空option当作分隔线 -->
    <option></option>
    <option value="3">其他1</option>
    <option value="4">其他2</option>
    <option value="5"><mark>标记</mark></option>
</datalist>

也可以使用<optgroup>元素表示分隔线。

相关代码如下所示：

<ui-drop class="ui-button" type="primary" target="t7">点击我-optgroup</ui-drop>
<datalist id="t7">
    <optgroup>
        <option value="1">列表1</option>
        <option value="2">列表2</option>
    </optgroup>
    <optgroup>
        <option value="3">其他1</option>
        <option value="4">其他2</option>
    </optgroup>
</datalist>

如果<optgroup>元素有label属性值，则该属性值会作为小标题元素呈现。

相关代码如下所示：

<ui-drop class="ui-button" data-type="primary" target="t8">点击我-label标题</ui-drop>
<datalist id="t8">
    <optgroup label="标题A">
        <option value="1">列表1</option>
        <option value="2">列表2</option>
    </optgroup>
    <optgroup label="标题B" disabled>
        <option value="3">禁用1</option>
        <option value="4">禁用2</option>
    </optgroup>
    <optgroup label="标题C">
        <option value="5">其他1</option>
        <option value="6" disabled>其他2</option>
    </optgroup>
</datalist>

4. 自定义元素直接执行 list() 方法

也可以使用 list() 方法设置，例如有个按钮是：

<ui-drop id="d4" is="ui-button" type="primary">点击我</ui-drop>

则使用下面的JS代码就可以有下拉列表效果了：

d4.list([{
    id: 1,
    value: '列表1'
}, {
    id: 2,
    value: '列表2'
}]);

如果希望列表点击时候按钮文字不变，可以设置 selector 属性值为 trigger匹配的选择器即可。例如：

<ui-drop id="d4_2" class="ui-button" data-type="primary" selector="ui-drop">点击我</ui-drop>

5. 自定义click事件+异步处理显示

使用一个200毫秒定时器模拟异步请求处理。

<button id="dl5" class="ui-button" data-type="primary">点击我</button>

let drop5 = new Drop(dl5).list({
    eventType: 'custom'
});

dl5.addEventListener('click', function () {
    this.loading = true;
    setTimeout(() => {
        drop5.data = ['项目1', '项目2'];
        drop5.show();

        this.loading = false;
    }, 200);
});

语法和参数

let eleDrop = new Drop(trigger).list(data, options);

或者

let eleDrop = new Drop().list(trigger, data, options);

其中：

trigger

必需。Object DOM 对象或 String 选择器字符串。表示按钮或者委托容器元素（如果可选 selector 参数不为空）。

data

必需。Array 数组或者 Function 函数或者 <datalist> 元素。如果是 Function 类型，则执行后需要返回数组。数组项都是纯对象，列表呈现需要的是 value、 selected、disabled 等属性，如果有 href 属性则表示链接，其他属性为自定义使用, 例如 target、label、className、heading、accessKey等：

[{
    id: 1,
    value: '所有评论',
    selected: true
}, {
    id: 2,
    value: '未审核评论',
    disabled: true
}, {
    id: 3,
    value: '链接',
    href: '//l-ui.com',
    target: '_blank'
}]

红色的关键字是组件可识别的关键属性，其余属性(蓝色)可以在 onSelect 回调中为己所用。

可使用 data 属性嵌套多层级列表，例如：

[{
    value: '多级列表',
    data: [{
        value: '二级列表1'
    }, {
        value: '二级列表2'
    }]
}]

可以使用字符串'-'，或者null或者{}表示分隔线。例如：

[{
    id: '0',
    value: '居左显示'
}, {
    id: '1',
    value: '居中显示'
}, {
    id: '2',
    value: '居右显示'
}, {}, {
    id: '3',
    value: '应用滤镜'
}]

options

可选。Object 纯对象。可选参数，具体见下表：