pandora-select

    1.2.3 • Public • Published

    Select


    Build Status Coverage Status

    模拟 select 的组件. 目前只兼容现代浏览器


    使用方法

    Select 继承 Widget

    field 为 select

    html 片段

    <select id="template" name="template">
      <option value="0">蓝色模板</option>
      <option value="1">红色模板</option>
    </select>

    javascirpt 片段

    new Select({
      field:'#tempalte'
    })

    field 为其他 DOM

    html 片段

    <a href="#" id="template"></a>

    javascript 片段

    new Select({
        field: '#template',
        name: 'template',
        model: [
            {value:'0', text: '蓝色模板'},
            {value:'1', text: '红色模板'}
        ]
    });

    配置说明

    field string

    field 可以为 select 或 其他任何 DOM。

    **注意:**field只能为一个 DOM,如果选出来多个会取第一个

    • 如果为 select,会将其隐藏。
    • 如果为 DOM,实例化的时候则需要提供 model 作为数据源

    model object

    model 的来源有两处

    1. 初始化传入
    2. 如果 field 为 select,则会根据结构生成 model

    model 的格式为

    [
        {value:'value1', text: 'text1', selected: true},
        {value:'value2', text: 'text2'}
    ]

    value text 均为 option 的属性

    classPrefix string_

    样式前缀,默认为 ue-select

    name string

    模拟 select 的属性,表单项需要的 name 值,等同于 select.name

    注意:如果 field 不是 select,那么会先在页面找 name 的 input,找不到再创建一个。

    value string

    模拟 select 的属性,获取被选中 option 的 value 值,等同于 select.value, 多选时用“,”隔开

    multiple boolean

    多选框,采用 checkbox 进行多选,field 为 select设置为multiple无效,必须在这设置

    hasOptionAll boolean

    是否有”全部“选项,默认为 false

    hasLebel boolean

    是否要显示 label,即 select 框说明,只适用于原生 select

    search boolean

    是否开启搜索

    sifterOptions object

    搜索配置, 开启 search,才生效

    • fields 要搜索的字段集合
    • placeholder 搜索框 placeholder
    • emptyTemplate 搜索结果为空时,显示的文本
    • limit 搜索条数

    方法

    .select(option)

    //TODO

    事件

    change

    //TODO

    问题讨论

    Install

    npm i pandora-select

    DownloadsWeekly Downloads

    5

    Version

    1.2.3

    License

    none

    Last publish

    Collaborators

    • lynzz