LuLu UI Edge版中文文档 » FollowText文字轻提示

本组件适合用在点击交互的敏捷提示上，例如复制成功，或者点赞成功等交互操作。

安装与调用

引入 CSS：

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

引入 JS：

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

或者使用 import 语法。

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

基本效果示意

b0.addEventListener('click', function (event) {
    followText('我是提示~', event);
});
b1.addEventListener('click', function (event) {
    followText.success('复制成功！', event);
});
b2.addEventListener('click', function (event) {
    followText.error('已点赞！', event);
});

自定义提示内容

提示内容除了支持纯文本，还支持富文本内容，我们可以利用这里特性实现图像提示效果。

.like {
    display: block;
    width: 1.5rem; height: 1.5rem;
    background-color: var(--ui-red);
    -webkit-mask: url(like.svg) no-repeat center / 1.25rem 1.25rem;
}

button.addEventListener('click', function (event) {
    followText('<i class="like"></i>', event);
});

语法和参数

支持构造语法和静态语法两种。

如果是 JS 文件直联，可以使用下面的语法：

new FollowText(content, type?, options?);

如果是 import 导入，支持下面的语法：

import followText from './FollowText/index.js';
// 静态语法
followText(content, type?, options?);
// 快捷静态方法
followText.success(content, options);
followText.error(content, options);
followText.warning(content, options);
            

参数