Blaze UI 输入提示

Blaze UI 输入提示是一款基于Blaze UI框架的输入提示组件，使用简单、易于扩展、高度可定制化。

安装

通过npm安装：

npm install @blaze-ui/input-hint

使用

通过简单的配置即可应用提示组件：

<div class="input-wrapper">
  <input type="text" placeholder="请输入...">
  <div class="hint"></div>
</div>

<script>
  const inputHint = new InputHint('.input-wrapper', {
    hintText: '请填写正确的XXX',
    trigger: 'focus',
    position: 'bottom'
  });
</script>

配置

组件支持以下配置：

属性

• hintText: String，提示文本。
• trigger: String，触发器，默认为'focus'。
• position: String，提示框位置，默认为'bottom'。
• showDelay: Number，显示延迟时间，默认为0。
• hideDelay: Number，隐藏延迟时间，默认为0。

方法

• show(): 显示提示框。
• hide(): 隐藏提示框。

高级

可以简单地通过CSS自定义提示框的样式：

.input-wrapper .hint {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  color: #333;
  font-size: 12px;
  padding: 5px;
}

总结

简单易用、高度可定制化的Blaze UI输入提示组件是优秀的前端工具库之一，可以大幅度提高开发者工作效率。