Skip to content
目录

select

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

使用方式

html
<!-- 引入 -->
<script type="module">
    import '../components/select/index.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>

value

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

Option1Option2Option3选中Option3
html
<xy-select value="2">
    <xy-option value="1">Option1</xy-option>
    <xy-option value="2">Option2</xy-option>
    <xy-option value="3">Option3</xy-option>
</xy-select>

JavaScript操作getset

js
select.value; //获取
select.value = "3";
//原生属性操作
select.setAttribute('value','');

TIP

这里的value取决于xy-optionvalue属性,如果xy-option没有设置value属性,默认为textContent

禁用disabled

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

Option1Option2Option3禁用
html
<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操作getset

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

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

Option1Option2Option3Option4Option5
html
<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>

分组xy-optgroup

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

Option1Option2Option3Option4Option5
html
<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-select>

如果给分组加上disabled属性,可以将下面的选项全部禁用

Option1Option2Option3Option4Option5

自定义插槽slot=button

默认情况下选择器是xy-button,如果需要自定义样式,可以指定具名插槽slot=button,选中的文本会自动渲染到这个标签上

比如下面是不同风格按钮的选择器

Option1Option2Option3Option1Option2Option3Option1Option2Option3Option1Option2Option3
html
<xy-select>
    <xy-button type="primary" slot="button"></xy-button>
    <xy-option value="1">Option1</xy-option>
    <xy-option value="2">Option2</xy-option>
    <xy-option value="3">Option3</xy-option>
</xy-select>

还可以指定选中文本显示的节点,通过behavior="selected-value"指定(没有该属性时默认渲染到slot="button"本身)

北京上海武汉
html
<style>
.custom-button label{
    position: absolute;
    font-size: 12px;
    background: var(--primary-bg);
    left: 8px;
    top: -8px;
    transform: scale(.8)
}
</style>
<xy-select>
    <xy-button class="custom-button" slot="button">
        <label>地区</label>
        <span behavior="selected-value"></span>
    </xy-button>
    <xy-option>北京</xy-option>
    <xy-option>上海</xy-option>
    <xy-option>武汉</xy-option>
</xy-select>

事件event

onchange

在下拉选中完成时触发。

Option1Option2Option3
html
<xy-select onchange="message.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>
js
select.onchange = function(ev){
    console.log(this.value);
    console.log(this.label);
    console.log(ev.target.value);
    console.log(ev.target.label);
}

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

其他

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

Option1Option2Option3link
html
<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>

MIT License.