LuLu UI Edge版中文文档 » ErrorTip 出错提示

安装与调用

引用下面CSS：

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

JS为：

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

单个出错提示演示与代码

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

同时出错提示演示与代码

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

任意元素出现错误提示

button.addEventListener('click', function () {
    errorSpan.errorTip('这里出现了错误');
});

红色提示语法和参数

语法如下：

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

或者

element.errorTip(content, options);

其中：

element

必须。Object DOM 元素。用来帮助提示定位的元素。

content

必须。String 字符串 | Function 函数。提示的文案信息，支持 HTML 字符串。

options

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

其他说明

在实际开发中，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 () {}
}