LuLu UI pure版中文文档 » Tips/ErrorTip提示

Fork Me

Tips/ErrorTip提示

安装与调用

1. 黑色tips提示

引用下面CSS:

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/edge/css/common/ui/Tips.css">

JS为:

<script type="module" src="https://qidian.gtimg.com/lulu/edge/js/common/ui/Tips.js"></script>

2. 红色出错ErrorTip提示

引用下面CSS:

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/edge/css/common/ui/Tips.css">

JS为:

<script type="module" src="https://qidian.gtimg.com/lulu/edge/js/common/ui/ErrorTip.js"></script>

Tips黑色提示效果

CSS基本定位效果与演示

基本效果,自带延时:

<i class="ui-tips" title="删除"></i>

也可以使用 is-tips="css":

<i is-tips="css" title="删除"></i>

CSS定位支持动态效果测试:动态插入HTML

// 动态tips
button.addEventListener('click', function () {
    this.insertAdjacentHTML('afterend', ' <i class="ui-tips" title="动态设置1"></i>');
    this.insertAdjacentHTML('afterend', ' <i is-tips="css" title="动态设置2"></i>');
});

只要有类名.ui-tips以及title属性即可,Tips.js加载后会把原生的title属性转换成自定义的data-title属性,然后CSS代码通过[data-title]属性选择器进行匹配实现最终的定位效果。因此,如果你的HTML直接使用data-title属性而不是title属性,则 Tips.js 无需加载就可以有效果,但并不推荐。

JS基本定位效果与演示

推荐使用 <ui-tips> 自定义元素:

<ui-tips title="删除"><i class="icon_del"></i></ui-tips>

如果自定义元素不方便使用,也可以在普通HTML元素上添加is-tips实现提示效果,例如:

<i is-tips title="注销"></i>

效果为:

is-tips触发的黑色提示浮层定位是基于JS计算,不受布局限制。同样也支持动态插入元素的提示效果。

支持<br>换行:

<i is-tips title="第一行<br>第二行"></i>

特殊方向的定位效果

方向朝下的tips,一般用在触发提示的元素在浏览器上边缘的时候。

CSS触发:

通过添加类名.reverse实现,如下代码示意:

<i class="ui-tips reverse" title="朝下提示"></i>

JS触发:

可以在元素上添加类名.reverse实现,如下:

<i class="jsTips reverse" title="朝下提示"></i>

<ui-tips>触发 :

可以在标签上添加自定义属性reverse实现,如下:

<ui-tips title="朝下提示" reverse></ui-tips>

内容较多,小三角偏移在右侧的黑色tips:

使用data-align控制,可以使用'right'关键字,这里也可以使用2-3

<i is-tips data-align="right" title="点击此...新登录"></i>
<ui-tips align="right" title="ui-tips自定义元...即可"></ui-tips>

内容较多,小三角偏移在左侧的黑色tips: ,设置data-align属性值控制,可以使用'left'关键字,也可以使用1-4

<i is-tips data-align="left" title="点击此...新登录"></i>

方向朝右的黑色tips:

 <a href is-tips data-align="6-8" title="提示在右"></a>

方向朝左的黑色tips:

 <a href is-tips data-align="8-6" title="提示在左"></a>

JS语法绑定

// 使用 trigger.tips(options)
button.tips({
    content: "使用 trigger.tips(options)",
    align: "1-4",
    onShow: function() { console.log('show tips', this.id)},
    onHide: function() { console.log('hide tips', this.id)},
})

其他事件中触发

input class="ui-input" id="input" placeholder="focus me">
<i id="icon" class="icon_del"></i>
input.addEventListener('focus', () => {
    icon.tips('删除条目,看看ui-tips有没有一并删除', {
        eventType: 'none'
    });
});
input.addEventListener('blur', () => {
    icon['ui-tips'].hide();
});

关键参数是设置eventType属性值为任意的自定义类型。

黑色提示语法和参数

语法

trigger.tips(options)

或者:

trigger.tips(content, options)

参数

trigger
必需。Element。触发元素或者触发元素的选择器。
options
可选。Object。具体如下表:
参数名称 支持类型 默认值 释义
eventType String 'hover' 触发提示信息显示的事件类型,默认是'hover'还支持 'click''null'其中 'click'表示点击事件,'null'表示没有事件,直接显示,一般需要调用实例对象的show()hide()方法进行显隐控制。
content String '' 提示的内容,如果为空则会取元素的title属性值作为提示信息。
align String 'auto' 表示提示信息的定位方式。

默认值是'auto',表示优先使用触发元素的data-align或者data-position属性值作为参数,如果没有设置这两个属性,则会当作参数'center'处理,表现为在触发元素上方水平居中显示。

align参数支持关键字值和具体的坐标值。

关键字值除了默认的'auto',还有'left''right''center',关键字参数都是在上方显示的,'left''right'影响的是提示信息的左右偏移位置,而不是定位方式。如果触发元素包含类名.reverse,则这几个关键字表示提示信息在下方显示。

具体的坐标值指使用'target-trigger'这种定位规则的参数值,不同位置与对应的值见下图所示:

例如'6-8'表示触发元素的位置'6'和浮层元素的位置'8'对齐,于是就有了左侧垂直居中定位效果。

onShow Function function () {} 提示信息显示时候的回调方法。函数的上下文this<ui-tips>元素。支持两个参数,第一个参数触发元素,第二个参数,为浮层提示元素。
onHide Function function () {} 提示信息隐藏时候的回调方法。函数的上下文this<ui-tips>元素。支持两个参数,第一个参数触发元素,第二个参数,为浮层提示元素。

其他说明

提示内容信息取自HTML原生的title属性。

属性和方法

<ui-tips>元素暴露了以下属性和方法:

{
    // 提示内容显示与否,布尔值
    display: false,
    element: {
      // 触发提示显示的元素
      trigger: null,
      // 提示元素
      tips: null
    },
    callback: {
      // 显示的回调方法
      onShow: function () {},
      // 隐藏的回调方法
      onHide: function () {}
    },
    params: {
      // 事件类型
      eventType: '',
      // 对齐方式
      align: ''
    },
    // 提示显示
    show: function () {},
    // 提示隐藏
    hide: function () {}
}

大多数场景下,直接引入对应CSS和JS文件,然后设置类名.ui-tips或者设置属性is-tips="css"就有效果了,无需关心具体的调用。如果本身有 before/after 伪元素,则可以使用 <ui-tips> 自定义标签或设置属性 is-tips 即可。

ErrorTip红色出错效果

单个出错提示演示与代码

button.addEventListener('click', function () {
    var eleAllInput = this.parentElement.querySelectorAll('input');

    eleAllInput.forEach(function (input, index) {
        if (input.value == '') {
            new ErrorTip(input, '尚未输入搜索内容' + (index + 1));
        }
    });
});

同时出错提示演示与代码

eleBtnSearch2.addEventListener('click', function () {
    var eleAllInput = this.parentElement.querySelectorAll('input');

    eleAllInput.forEach(function (input, index) {
        if (input.value == '') {
            new ErrorTip(input, '尚未输入搜索内容' + (index + 1), {
                unique: false
            });
        }
    });
});

任意元素出现错误提示演示与代码

这里是一段文字

eleBtnSearch3.addEventListener('click', function () {
    var errorSpan = document.getElementById('error-span')
    errorSpan.errorTip('这里出现了错误');
});

红色提示语法和参数

语法如下:

var myErrorTip = new ErrorTip(element, content, options);

或者

element.errorTip(content, options);

其中:

element
必须。Object DOM元素。用来帮助提示定位的元素。
content
必须。String字符串|Function函数。提示的文案信息,支持HTML字符串。
options
可选。Object纯对象。表示可选参数,具体见下表:
参数名称 支持类型 默认值 释义
unique Boolean true 是否页面是只会出现一个错误提示,默认是true, 永远只会有一个。此参数实际开发很少用到。

onShow Function function () {} 红色出错提示显示时候的回调方法。函数的上下文this是当前实例,支持两个参数,分别表示当前提示元素的定位元素和浮层提示元素。
onHide Function function () {} 红色出错提示隐藏时候的回调方法。函数的上下文this是当前实例,支持两个参数,分别表示当前提示元素的定位元素和浮层提示元素。

其他说明

在实际开发中,ErrorTip出错提示组件和表单验证强关联,可以试试使用Validate验证组件

另外,红色出错提示出现的时候,会自动给该定位元素添加类名.valided和属性is-error,红色出错提示隐藏的时候会移除属性is-error.valided类名会保留,方便识别是否已经验证提示过。

实例对象

myErrorTip就是返回的实例对象,暴露了以下属性和方法:

{
    // 提示内容显示与否,布尔值
    display: false,
    element: {
      // 触发提示显示的元素
      trigger: null,
      // 提示元素
      tips: null,
      // 提示内容元素
      content: null,
      // 提示三角元素
      arrow: null
    },
    callback: {
      // 显示的回调方法
      show: function () {},
      // 隐藏的回调方法
      hide: function () {}
    },
    params: {
      // 布尔值,是否唯一提示显示
      unique: true
    },
    // 提示显示
    show: function () {},
    // 提示隐藏
    hide: function () {}
}
本页贡献者:

zhangxinxu