xy-uiselect
下拉选择器。用于替代原生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
设置或返回下拉选择器的默认值，如果不设置，则默认选中第一项。
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操作get、set
js
select.value; //获取
select.value = "3";
//原生属性操作
select.setAttribute('value','');
TIP
这里的value取决于xy-option的value属性，如果xy-option没有设置value属性，默认为textContent
禁用disabled
通过disabled可以禁用下拉选择器。
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操作get、set
js
select.disabled; //获取
select.disabled = false;
select.disabled = true;
//原生属性操作
select.setAttribute('disabled','');
select.removeAttribute('disabled');
如果设置在xy-option可单独禁用某一项
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。
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属性，可以将下面的选项全部禁用
自定义插槽slot=button
默认情况下选择器是xy-button，如果需要自定义样式，可以指定具名插槽slot=button，选中的文本会自动渲染到这个标签上
比如下面是不同风格按钮的选择器
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
在下拉选中完成时触发。
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链接
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>