easy

DocsVersion : 0.1.0

EmailSuggest 邮箱提示组件

Define in : emailsuggest.js

该组件用于在输入邮箱的时候创建一个常见邮箱后缀的 suggest 列表,提升邮箱输入的用户体验。

EmailSuggest( target, [ options ] )

依赖
JS : 不依赖
CSS : 依赖样式
HTML : 不固定
参数
  • target
    String|
    Element|
    easyJS Object
    必需

    target 可以是选择器字符串、DOM 元素,也可以是 easyJS Object。传入你想绑定邮箱提示的输入框元素。

  • options
    Object
    可选

    多选形式的可配置参数。

下表列出多选可配置形式的参数的详细说明。

参数 数据类型 默认值 说明
data Array null

邮箱后缀的数组,如[ '163.com', '126.com' ]。用于显示在 suggest 列表中。

space Number 0

邮箱提示列表距离 input 输入框的距离。

zIndex Number 9998

邮箱提示列表的定位层级。

方法
  • on

    对选项卡实例绑定事件,该方法接受2个参数,第一个参数是事件类型,第二个参数是事件处理器,返回实例便于链式调用。

  • un

    卸载选项卡实例的事件。该方法接受1个事件类型的参数。返回实例便于链式调用。

下表列出了支持的事件类型。

事件类型 说明 事件对象
selected

当选中了邮箱提示列表中的其中一项触发的事件。

event.target input 元素。

event.value 选中的值。

在使用 EmailSuggest 组件前,对其进行加载。

E.use( 'emailsuggest', function(){
    // 在回调中实例化选项卡
});

EmailSuggest 组件需要依赖样式,其依赖样式如下。

.eui_emailsuggest{ position:absolute; background:#fff; border:1px solid #ddd; width:186px; padding:5px 0; display:none; box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); }
.eui_emailsuggest li{ height:28px; line-height:28px; padding:0 10px; overflow:hidden; }
.eui_emailsuggest .tip{ color:#999; }
.eui_emailsuggest .current{ color:#fff; background:#2d89ef; }
例子1

给邮箱输入框创建一个邮箱提示列表。

var arr = [ '163.com', 
            '126.com', 
            'qq.com', 
            'yahoo.com.cn', 
            'qq1.com', 
            'gmail.com', 
            'sohu.com', 
            'qq2.com', 
            'hotmail.com' ];
    
    new E.ui.EmailSuggest( '#email', {
        data : arr
    });