Skip to content

Latest commit

 

History

History
483 lines (388 loc) · 12.8 KB

xy-select.md

File metadata and controls

483 lines (388 loc) · 12.8 KB
Raw

xy-select

下拉选择器。用于替代原生select。

使用方式

<!-- 引入 -->
<script type="module">
    import './node_modules/xy-ui/components/xy-select.js';
</script>
<!-- 使用 -->
<xy-select>
    <xy-option value="1">Option1</xy-option>
    <xy-option value="2">Option2</xy-option>
    <xy-option value="3">Option3</xy-option>
</xy-select>

xy-select配合xy-option才能渲染到下拉菜单中，其他标签不会渲染。

风格type

跟随xy-button。

Option1 Option2 Option3 Option1 Option2 Option3 Option1 Option2 Option3 Option1 Option2 Option3 
<xy-select>
    <xy-option value="1">Option1</xy-option>
    <xy-option value="2">Option2</xy-option>
    <xy-option value="3">Option3</xy-option>
</xy-select>
<xy-select type="flat">
    <xy-option value="1">Option1</xy-option>
    <xy-option value="2">Option2</xy-option>
    <xy-option value="3">Option3</xy-option>
</xy-select>
<xy-select type="primary">
    <xy-option value="1">Option1</xy-option>
    <xy-option value="2">Option2</xy-option>
    <xy-option value="3">Option3</xy-option>
</xy-select>
<xy-select type="dashed">
    <xy-option value="1">Option1</xy-option>
    <xy-option value="2">Option2</xy-option>
    <xy-option value="3">Option3</xy-option>
</xy-select>

块状block

跟随xy-button，宽度充满父级。

Option1 Option2 Option3 
<xy-select block>
    <xy-option value="1">Option1</xy-option>
    <xy-option value="2">Option2</xy-option>
    <xy-option value="3">Option3</xy-option>
</xy-select>

初始值defaultvalue

设置或返回下拉选择器的默认值，如果不设置，则默认选中第一项。

Option1 Option2 Option3 
<xy-select defaultvalue="2">
    <xy-option value="1">Option1</xy-option>
    <xy-option value="2">Option2</xy-option>
    <xy-option value="3">Option3</xy-option>
</xy-select>

占位placeholder

当没有设置初始值defaultvalue时，可设置默认提示，默认为请选择。

Option1 Option2 Option3 
<xy-select placeholder="请选择一项">
    <xy-option value="1">Option1</xy-option>
    <xy-option value="2">Option2</xy-option>
    <xy-option value="3">Option3</xy-option>
</xy-select>

禁用disabled

通过disabled可以禁用下拉选择器。

Option1 Option2 Option3 
<xy-select disabled>
    <xy-option value="1">Option1</xy-option>
    <xy-option value="2">Option2</xy-option>
    <xy-option value="3">Option3</xy-option>
</xy-select>

JavaScript操作get、set

select.disabled; //获取
select.disabled = false;
select.disabled = true;
//原生属性操作
select.setAttribute('disabled','');
select.removeAttribute('disabled');

如果设置在xy-option可单独禁用某一项

Option1 Option2 Option3 
<xy-select>
    <xy-option value="1">Option1</xy-option>
    <xy-option value="2" disabled>Option2</xy-option>
    <xy-option value="3">Option3</xy-option>
</xy-select>

值value、文本text

设置或返回下拉选择器的当前value属性值。

返回下拉选择器的text。

value指定在xy-option上，text指xy-option的textContent。

每个xy-option必须指定一个不重复的value。

该属性值在xy-select标签上不可见。

Option1 Option2 Option3 选中Option3 获取当前选中textContent

JavaScript操作get、set

select.value; //获取
select.text; //获取textContent(没有set方法)
select.value = 50;
//原生属性操作
select.setAttribute('value',50);
select.getAttribute('value');

分组xy-optgroup

可以通过xy-optgroup进行分组，名称为label。

Option1 Option2 Option3 Option4 Option5 Option6 
<xy-select>
    <xy-optgroup label="group1">
        <xy-option value="1">Option1</xy-option>
        <xy-option value="2">Option2</xy-option>
        <xy-option value="3">Option3</xy-option>
    </xy-optgroup>
    <xy-optgroup label="group2">
        <xy-option value="4">Option4</xy-option>
        <xy-option value="5">Option5</xy-option>
    </xy-optgroup>
    <xy-option value="6">Option6</xy-option>
</xy-select>

搜索search

添加search可对选项进行搜索。

过滤的条件是xy-option中的key属性（不区分大小写）。

武汉 北京 上海 深圳 重庆 杭州 广州 香港 
<xy-select search>
    <xy-option value="wuhan" key="wuhan-武汉-wh">武汉</xy-option>
    <xy-option value="beijing" key="beijing-北京-bj">北京</xy-option>
    <xy-option value="shnaghai" key="shnaghai-上海-sh">上海</xy-option>
    <xy-option value="shenzhen" key="shenzhen-深圳-sz">深圳</xy-option>
    <xy-option value="chongqing" key="chongqing-重庆-cq">重庆</xy-option>
    <xy-option value="hangzhou" key="hangzhou-杭州-hz">杭州</xy-option>
    <xy-option value="guangzhou" key="guangzhou-广州-gz">广州</xy-option>
    <xy-option value="hongkong" key="hongkong-香港-hk">香港</xy-option>
</xy-select>

内部通过属性选择器xy-option:not([key*="${value}" i])简单实现，设置search后，type风格失效

必填项required

表单验证属性，表示必填

Option1 Option2 Option3 Option1 Option2 Option3 Option1 Option2 Option3 Option1 Option2 Option3 
<xy-select required>
    <xy-option value="1">Option1</xy-option>
    <xy-option value="2">Option2</xy-option>
    <xy-option value="3">Option3</xy-option>
</xy-select>

默认提示信息为请选择一项，可通过errortips自定义提示。

合法性validity

可以通过属性validity来获取下拉框的合法性。

Option1 Option2 Option3 合法性

JavaScript操作get

select.validity;//获取

自定义尺寸

默认情况下，xy-select尺寸跟随xy-button，可以自定义宽高

<style> .xy-select-custom{ width:120px; height:30px; } </style> Option1 Option2 Option3 
<style>
.xy-select-custom{
    width:120px;
    height:30px;
}
</style>
<xy-select class="xy-select-custom">
    <xy-option value="1">Option1</xy-option>
    <xy-option value="2">Option2</xy-option>
    <xy-option value="3">Option3</xy-option>
</xy-select>

事件event

onchange

在下拉选中完成时触发。

Option1 Option2 Option3 
<xy-select onchange="XyMessage.info('当前选中value:'+this.value)">
    <xy-option value="1">Option1</xy-option>
    <xy-option value="2">Option2</xy-option>
    <xy-option value="3">Option3</xy-option>
</xy-select>
select.onchange = function(ev){
    //获取value和text的几种方式
    /*
    event:{
        detail:{
            value,
            text,
        }
    }
    */
    console.log(this.value);
    console.log(this.text);
    console.log(ev.target.value);
    console.log(ev.target.text);
    console.log(ev.detail.value);
    console.log(ev.detail.text);
}

select.addEventListener('change',function(ev){
    console.log(this.value);
    console.log(this.text);
    console.log(ev.target.value);
    console.log(ev.target.text);
    console.log(ev.detail.value);
    console.log(ev.detail.text);
})

onfocus

focus后的回调事件。

与xy-button使用方式一致。

方法function

focus

用于主动聚焦focus，聚焦以后可以响应键盘事件，支持方向键。

Option1 Option2 Option3 主动聚焦 
select.focus();

reset

复原选项，回到默认值。

Option1 Option2 Option3 reset 
select.reset();

当然，直接操作也是可行的

this.value = this.defaultvalue;

checkValidity

用于主动校验，弹出提示信息。

Option1 Option2 Option3 主动校验 
select.checkValidity();

其他

xy-select除了包裹xy-option以外，还能包裹其他标签，比如a链接

<style> .xy-link{ display:block; padding:0 .8em; } </style> Option1 Option2 Option3 link 
<xy-select>
    <xy-option value="1">Option1</xy-option>
    <xy-option value="2">Option2</xy-option>
    <xy-option value="3">Option3</xy-option>
    <a class="xy-link" href="#">link</a>
</xy-select>