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

安装与调用

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

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

或者：

<script type="module">
    import Drop from "https://qidian.gtimg.com/lulu/hope/ui/Drop/index.js";
</script>

概述

Drop 组件支持 3 种使用方式。

3 种使用方式分别是：

1. 使用自定义元素 <ui-drop>（推荐）；
2. 普通元素上设置 is-drop 属性；
3. 传统的 new Drop() 构造语法。

下面具体介绍 Drop 组件的使用。

<ui-drop> 自定义元素

1. open 属性变化与相邻元素的显示

<ui-drop> 自定义元素默认自带 'click' 事件，会根据点击的是否是当前元素切换 open 属性，因此，<ui-drop> 自定义元素即使不设置任何参数，也是可以实现一些基本的交互效果的。

例如下面这段 HTML 代码，无需任何额外的 JavaScript 代码就可以实现相邻 <div> 元素的下拉效果：

<ui-drop><button type="primary" is="ui-button">点击我</button></ui-drop>
<div class="ui-drop-target"><img src="1.png"></div>

其中，类名 'ui-drop-target' 是 Drop 组件内置的类名，当位于 <ui-drop> 元素后面的时候，可以自动根据 <ui-drop> 元素的 open 状态显示与隐藏。

点击我

当然，开发者可以自定义显示与隐藏的实现，例如：

<ui-drop><button type="primary" is="ui-button">点击我</button></ui-drop>
<div class="some-target"><img src="1.png"></div>

:not([open]) + .some-target {
    display: none;
}

点击我

2. 指定目标元素

<ui-drop> 可以通过设置 'target' 属性指定需要下拉显示的元素，例如：

<ui-drop target="t1"><a href="javascript:">click我</a></ui-drop>
<div id="t1" class="ui-droplist-x" hidden>
    <button>测试按钮</button>
    <p><a href="javascript:">测试文字</a></p>
</div>

支持多个元素指向同一个下拉元素，例如下面这个同样指向 't1' 元素的按钮：

<ui-drop class="ui-button" type="primary" target="t1">click我</ui-drop>

支持每次显示指向不同的目标元素，例如：

<ui-drop target="t1" id="df1">click我</ui-drop>

df1.addEventListener('hide', function () {
    if (this.target == 't1') {
        this.target = 't2';
    } else if (this.target == 't2') {
        this.target = 't1';
    }
});

效果测试：点击我

下面这个例子演示虽然 target 属性值不变，但是目标元素实际上每次都是新的 DOM 节点。

<ui-drop target="area" id="df2">click我</ui-drop>
<div id="tx"><textarea id="area" hidden>首次显示</textarea></div>

df2.addEventListener('hide', function () {
    tx.innerHTML = `<textarea id="area" hidden>每次都是新的：${+new Date()}</textarea>`;
    this.element.target = tx.querySelector('#area');
});

对于这种场景，需要手动重新更新组件的 target 对象。

3. 指定交互事件类型

Drop 组件除了支持默认是'click'点击事件，还支持 'null' 无绑定事件，此时下拉元素的显示与隐藏都需要开发者自己手动触发。

事件的类型通过 eventType 属性（大小写任意）设置，下面是一个简单的案例示意。

<a href="javascript:" onclick="this.firstElementChild.open=true">
    <ui-drop target="t3" eventtype="null"点击显示</ui-drop>
</a>
<div id="t3" class="ui-droplist-x" hidden>
    <button onclick="document.querySelector('[target=t3]').open=false;">点击我隐藏</button>
</div>

4. 显隐控制与对应的事件触发

下拉元素显示与隐藏的控制包括下面这些方法：

// 显示，二选一
drop.open = true;
drop.show();

// 隐藏，二选一
drop.open = false;
drop.hide();

open 属性控制下拉元素的显隐状态上面的例子已经演示过了，这里演示下 <ui-drop> 元素的 show() 和 hide() 方法。

<ui-drop id="drop4" type="primary" target="t4" is="ui-button">请点击后面两个按钮</ui-drop>

<button id="ds" type="warning" is="ui-button">点击执行show()</button>
<button id="dh" type="danger" is="ui-button">点击执行hide()</button>

ds.addEventListener('click', function (event) {
    // 阻止冒泡
    event.stopPropagation();
    // 安心显示
    drop4.show();
});
dh.addEventListener('click', function (event) {
    // 阻止冒泡
    event.stopPropagation();
    // 安心隐藏
    drop4.hide();
});

如果希望在下拉元素显示和隐藏的时候做些事情，可以使用自定义的 show 和 hide 事件，代码示意如下所示：

drop4.addEventListener('show', () => {
    console.log('下拉显示啦~');
});
drop4.addEventListener('hide', () => {
    console.log('下拉隐藏了~');
});

如果希望默认下拉就显示，只需要设置 <ui-drop> 元素的 open 属性值为任意字符串。

例如：

<ui-drop target="t5" class="ui-button" data-type="primary" position="2-1" open>

is-drop 快捷语法

本 Drop 组件支持在原生HTML元素上添加 is-drop 属性实现下拉效果。

需要注意的是，此语法不支持 open 属性，也不包含 show() 和 hide() 方法；以及 JS 设置 is-drop 属性是不会产生任何变化的（权衡利弊后的策略，这种场景请使用 new Drop() 构造方法）。

使用示意（下面2种用法效果一致）：

<a href="javascript:" is-drop="t2">click我</a>

<a href="javascript:" data-target="t2" is-drop>click我</a>

is-drop 快捷语法支持自定义其他参数，包括交互事件类型，定位的方位以及偏移大小等，均使用 data-* 语法进行设置。例如：

<a href data-position="4-1" is-drop="t2">hover我</a>

下面测试下直接 append 一段包含 is-drop 设置的 HTML 代码，看看下拉效果是不是正常出现。

button.addEventListener('click', function (event) {
    this.insertAdjacentHTML('afterend', '<p><a href is-drop="t2">插入内容，点击我</a></p>');
});

new Drop() 构造语法

new Drop() 构造语法用来给普通的 HTML 元素绑定下拉交互行为。

new Drop() 执行的时候会创建 <ui-drop> 自定义元素并返回，和 new Dialog() 不同，new Drop() 方法创建的元素不会插入到页面上下文中，只会存在内存中。

例如：

let eleDrop = new Drop();

此时 eleDrop 就是一个存在内存中的 <ui-drop> 元素。

因此，<ui-drop> 元素包含的属性和方法均可以在 eleDrop 对象中使用。

例如执行 eleDrop.hide() 可以隐藏下拉元素。

1. 基本使用演示

相关代码如下：

<button id="b2" type="primary" is="ui-button">已绑定new Drop('#b2', '#t2')</button>

new Drop('#b2', '#t2');

2. 常见参数使用示意

new Drop() 构造语法支持 DOM 元素上设置参数，以及通过 JS 传参这两种方法，例如：

<button id="b3" is="ui-button" type="primary" data-position="5-7">传参测试</button>

// 传参使用演示
let d3 = new Drop('#b3', t3, {
    // 等同于d3.addEventListener('show', ...)
    onShow: function () {
        // this就是这里的d3
        this.element.trigger.dataset.type = 'warning';
    }
});
d3.addEventListener('hide', function () {
    this.element.trigger.dataset.type = 'primary';
});

3. 事件的委托

new Drop() 构造语法支持一个特有的 selector 参数，可以让 trigger 元素的某些子元素作为下拉元素显示的事件源，适用于下拉触发元素是动态生成的场景。

例如：

<p id="freshBtn"><a>内容</a></p>
<img id="i1" src="9.png">

// 点击<a>元素显示下拉
new Drop('#freshBtn', i1, {
    selector: 'a'
});

内容

上面链接HTML刷新

Drop语法和参数

语法为：

let eleDrop = new Drop(trigger, target, options);

其中：

trigger

可选。Object 元素或 String 选择器。触发 Drop 浮层显示的 DOM 元素，如果缺省，表示触发元素是 eleDrop 自身。

target

可选。Object 元素或 String 选择器。Drop 浮层元素。如果 trigger 和 target 只设置了其中一个，则这个参数认为是 trigger。

options

可选。Object 对象。可选参数见下表（红色星号参数是 new Drop() 构造语法特有参数）：

在 DOM 元素上设置参数

上表所有参数均支持直接在 DOM 元素上设置，其中 onShow 和 onHide 参数对应的效果需要通过 addEventListener 方法进行设置，例如：

trigger.addEventListener('show', function () {});
trigger.addEventListener('hide', function () {});

其余所有参数均采用 data-* 的自定义参数的形式进行设置，注意保持小写，例如：

<a data-offsets="10, 10" data-edge-adjust="false" data-target="i1" is-drop>经过我</a>

对于 <ui-drop> 元素，则无需使用 data-*，直接设置对应参数即可，且不区分大小写，例如：

<ui-drop offsets="10, 10" edgeAdjust="false" target="i1">点击我</ui-drop>

DOM 扩展 drop() 方法

本组件还支持 element.drop() 语法，使用场景和底层实现和 new Drop() 构造语法一致。

例如：

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

b4.drop(t3);

点击我

ui-drop 元素的属性和方法

eleDrop 就是 <ui-drop> 元素，暴露了以下属性和方法：

{
    // 暴露的元素们
    element = {
        // 触发元素
        trigger: null,
        // 激活面板元素
        target: null
    },
    params: {
        // 事件类型
        eventtype: "click"
        // 浮动元素的偏移大小
        offsets: {x: 0, y: 0}
        // 触发元素和浮层元素的定位关系
        position: "",
        // 委托功能选择器
        selector: ""
    },
    // 参数设置
    setParams: function (options) {},
    // 重定位
    position: function () {},
    // 显示
    show: function () {},
    // 隐藏
    hide: function () {}
}