LuLu UI Edge版中文文档 » 静态控件之文本框

安装与调用

单独使用直接引入 CSS：

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

引入 JS：

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

或者：

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

静态展示

弹出层效果使用 <ui-popup> 元素模拟，例如：

<ui-popup overlay open>内容</ui-popup>

通过 popup.open 属性，或者 show() 和 hide() 方法控制弹出层的显示与隐藏。

<button id="b0" type="primary" is="ui-button">点击显示</button>

<ui-popup id="pp0" overlay>内容</ui-popup>

b0.addEventListener('click', function () {
    pp0.show();
});

基础样式设置

尺寸设置

使用 width 和 height 属性设置尺寸。

<ui-popup overlay height="10rem">内容</ui-popup>

动画设置

设置 transition 属性会让弹出层在显示和隐藏的时候有过渡动画效果。

<ui-popup transition overlay height="10%"></ui-popup>

方位设置

使用 position 属性设置方位，支持这几个值：left、top、right、bottom、center。

如果不作设置，则认为是 bottom 方位。

<ui-popup transition overlay width="20%" position="right"></ui-popup>

圆角设置

圆角效果通过 radius 属性进行设置。

<ui-popup radius></ui-popup>

此时的圆角大小是 1rem，支持指定圆角大小，如果单位不写，则认为是 px 大小。

<ui-popup radius="8px"></ui-popup>
<ui-popup radius=".5rem"></ui-popup>

背景设置

默认背景是白色，可以通过 background 属性设置任意合法的背景，支持图像与渐变。

<ui-popup background="black" overlay></ui-popup>
<ui-popup background="conic-gradient(#eee 25%, white 0deg 50%, #eee 0deg 75%, white 0deg) 0 / 20px 20px" overlay></ui-popup>

覆盖层设置

覆盖层不显示

设置 overlay 属性会显示黑色半透明覆盖层，如果没有，则不会显示半透明覆盖层。

<ui-popup>没有半透明覆盖层</ui-popup>

此参数可以用来实现底部弹出的广告或者功能提醒效果。

<ui-popup background="none" transition height="4rem">...</ui-popup>

覆盖层样式设置

覆盖层的样式通过 overlay 属性值进行设置，采用键值对字符串，且无需添加引号，例如：

<ui-popup id="pp17" height="160" overlay="{ opacity: 75% }"></ui-popup>

点击覆盖层不关闭

也是设置 overlay 属性。

<ui-popup height="160" close-icon overlay="{ mode: custom }"></ui-popup>

关闭按钮设置

显示关闭按钮

如果设置了属性 close-icon 则会显示关闭按钮。

<ui-popup close-icon height="200" overlay></ui-popup>

关闭按钮位置

可以使用 left、top、center 等方位值设置关闭按钮的位置，如果是多个方位，使用空格分隔。

默认是右上方位，因此，top、right可以省略，例如 close-icon="left" 等同于 close-icon="left top"。

<ui-popup close-icon="left" height="200" overlay>左侧</ui-popup>
<ui-popup close-icon="bottom center" height="200" overlay>底部居中</ui-popup>

自定义关闭图标

close-icon 支持任意的 <image> 数据类型值，不过，由于图标效果使用的遮罩实现的，因此，实际只支持镂空的 SVG 或者 PNG 图像，格式不限，外链、内联皆可。

例如使用搜索输入框中的清除图标作为关闭按钮的图标（全局通用 CSS 变量）：

<ui-popup close-icon="var(--ui-image-clear)" height="200" overlay></ui-popup>

又或者使用外链的 URL 地址：

<ui-popup close-icon="url(//qidian.gtimg.com/lulu/hope/ui/Input/assets/clear.svg)" height="200" overlay></ui-popup>

位置和图标同时自定义

如果图标和位置需要同时自定义，则图标的自定义需要使用底层 CSS 变量 --ui-popup-close-icon 实现，示意：

<ui-popup close-icon="left" style="--ui-popup-close-icon: var(--ui-image-clear)" height="200" overlay></ui-popup>

使用文字图标

如果不希望使用图标，直接使用文字，设置 close-icon="text" 即可。

<ui-popup close-icon="text" height="160" overlay></ui-popup>

支持和定位同时设置，例如：

<ui-popup close-icon="left bottom text" height="160" overlay></ui-popup>

使用子元素作为关闭按钮

如果 close-icon 的属性值是 ID 或类名选择器，则会使用匹配该选择器的 <ui-popup> 子元素作为关闭按钮元素。

<ui-popup close-icon="#bc" height="10rem" overlay>
    <button id="bc" is="ui-button">取消</button>
</ui-popup>

<ui-popup id="pp16" background="var(--ui-light-background)" close-icon="#bc" height="10rem" overlay>
    <style>#bc { width: calc(100% - 2rem); margin: 5rem 1rem 0; }</style>
    <button id="bc" type="default" is="ui-button">取消</button>
</ui-popup>

Popup 语法

本组件支持 new Popup() 语法创建并显示弹出层元素。

var popup = new Popup(content, options);

注意事项

• Popup 对象有别于组件 JS export 出来的对象，例如：

  import PrivPopup from '../Popup/index.js'

  此时的 PrivPopup 对象是个更干净的底层方法，和全局的 Popup 方法区别在于：

  1. 语法不同

  var popup = new PrivPopup(options);

  也就是 content 参数只能作为 options 的属性，不是个独立的参数。

  2. 默认值不同

  全局的 Popup 方法更像是一种快捷语法，默认开启了显示、动画、滚动锁定等行为，但是 PrivPopup 类只是单纯的创建一个干干净净的 <ui-popup> 元素，需要用户自己设置对动画的支持，设置弹出层的显示。

• new Popup() 每次执行都会创建一个全新的 <ui-popup> 元素，因此，非 'remove' 模式第二次显示请使用 popup.show() 方法，而不是再 new 一下。

参数

content

表示弹出框里面的内容，可以是 HTML 字符串，HTML 元素，NodeList 对象，HTMLCollection 对象，简易的选择器。

可选，非必须，也可以在 options 可选参数中进行设置。

options

表示可选参数，用来设置尺寸、圆角、背景、是否包含关闭按钮等，详见下表。

{
    display: "flex",
    "flex-direction": 'column'
}

HTML 字符串

演示 conetnt 参数值是 HTML 字符串的效果。

new Popup('<img src="a.jpg" style="display:block;margin:2rem auto;">');

基础 HTML 元素

const img = new Image();
img.src = 'qdmm.jpg';
img.style.display = 'block';
img.style.margin = '2rem auto';
// DOM 元素作为弹出层内容
b.addEventListener('click', function () {
    if (img.owner) {
        img.owner.show();
    } else {
        new Popup(img, {
            closeable: true
        });
    }
});

也可以使用页面中已有的隐藏的 HTML 元素，例如，页面中藏匿的列表。

<ui-list id="list" hidden>
    <ui-list-item>项目1</ui-list-item>
    <ui-list-item>项目2</ui-list-item>
    <ui-list-item>项目3</ui-list-item>
</ui-list>

new Popup(document.getElementById('list'));

选择器匹配

content 参数支持简易的选择器字符串，此时会把选择器匹配的元素作为提示内容。

具体案例见下面的“特殊 HTML 元素”。

特殊 HTML 元素

如果 content 参数是选择器字符串，同时匹配的元素是特殊的 HTML 元素，例如 <template>、<textarea>或者 <script>元素，则会使用这些元素的值或子内容作为弹出层的显示内容。

<template id="tpl">
    <img src="qdmm" width="250" height="172">
    <p><small class="gray">顺便测试下 position 和 style 参数</small></p>
</template>

new Popup({
    content: '#tpl',
    position: 'center',
    style: {
        padding: '1rem'
    }
});

<textarea id="area" hidden>
    <p><small>顺便测试下 overlay 和 background 参数</small></p>
    <img src="qdmm.jpg" width="250" height="172">
</textarea>

new Popup('#area', {
    position: 'top',
    overlay: {
        color: 'hsla(0,0%,100%,.6)'
    },
    background: 'var(--ui-dark)',
    style: {
        padding: '1rem',
        color: '#fff',
        textAlign: 'center'
    }
});

<script type="text/template" id="script">
    <img src="qdmm.jpg" width="250" height="172">
    <p><small class="gray">顺便测试下 radius 参数</small></p>
</script>

new Popup('#script', {
    position: 'left',
    radius: true
});

节点列表或元素合集

content 参数也可以是 NodeList 对象或者是 HTMLCollection 对象或者是 DOM 对象数组。

new Popup(document.querySelectorAll('some-selector'));
new Popup(document.forms);
new Popup([ele1, ele2, ele3, ...]);

new Popup([...document.querySelectorAll('h4')].map(h4 => {
    const list = document.createElement('ui-list-item');
    list.textContent = h4.textContent;
    return list;
}), {
    width: 'calc(100% - 2rem)',
    style: {
        maxHeight: 'calc(100% - 2rem)'
    }
});

属性和方法

new Popup() 的返回值就是 <ui-popup> 元素。

<ui-popup> 元素支持如下所示的属性和方法。

支持的属性

部分只读属性：

{
    // 是否和页面建立了联系，布尔值
    isConnectedCallback: false,
    // 弹出层相关元素
    element: {
        overlay: null,
        container: null,
        close: null
    }                
}

支持的方法

支持的自定义事件

使用示意：

popup.addEventlistener('show', () => {
    // 弹出层显示的时候...                
});