Select 下拉选择框

一个普通的下拉选择器。

代码演示

MikeTomLucy

<r-select style="width: 120px; height: 40px" defaultValue="185">
      <r-option value="185">Mike</r-option>
      <r-option value="186">Tom</r-option>
      <r-option value="187">Lucy</r-option>
    </r-select>

属性

默认值defaultValue

设置当前选中的值

MikeTomLucy

    <r-select style="width: 120px; height: 40px" defaultValue="185">
      <r-option value="185">Mike</r-option>
      <r-option value="186">Tom</r-option>
      <r-option value="187">Lucy</r-option>
    </r-select>

不可用状态disabled

添加 disabled 属性即可让选择框处于不可用状态，同时样式也会改变。

MikeTomLucy

    <r-select style="width: 120px; height: 40px" disabled defaultValue="185">
      <r-option value="185">Mike</r-option>
      <r-option value="186">Tom</r-option>
      <r-option value="187">Lucy</r-option>
    </r-select>

类型type

可以设置文本类型，不要边框和下拉图标

MikeTomLucy

<r-select
      style="width: 120px; height: 40px"
      type="text"
      defaultValue="185"
    >
      <r-option value="185">Mike</r-option>
      <r-option value="186">Tom</r-option>
      <r-option value="187">Lucy</r-option>
    </r-select>

下拉框的展示方向placement

下拉框展示方向默认往下，设置成top可以往上

MikeTomLucy

<r-select
      style="width: 120px; height: 40px"
      type="text"
      defaultValue="185"
      placement="top"
    >
      <r-option value="185">Mike</r-option>
      <r-option value="186">Tom</r-option>
      <r-option value="187">Lucy</r-option>
    </r-select>

带搜索框 showSearch

展开后可对选项进行搜索

MikeTomLucy

<r-select style="width: 120px; height: 40px" showSearch>
<r-option value="185">Mike</r-option>
<r-option value="186">Tom</r-option>
<r-option value="187">Lucy</r-option>
</r-select>

下拉框挂载元素的 idgetPopupContainerId

下拉框默认挂载到document.body上，可以传入元素的id，挂载到指定的元素内 `

MikeTomLucy

<r-select getPopupContainerId="elementid">
      <r-option value="185">Mike</r-option>
      <r-option value="186">Tom</r-option>
      <r-option value="187">Lucy</r-option>
    </r-select>

下拉框的 class 名dropdownclass

如果需要自定义下拉框的样式，可以传入一个 class 名，进行自定义

trigger

select 组件触发的方法。默认 click ，点击触发。可以设置hover，或者click,hover，表示点击和鼠标移入都触发。

如果设置成 none，就不会触发。

MikeTomLucy

<r-select getPopupContainerId="elementid" trigger="click,hover">
      <r-option value="185">Mike</r-option>
      <r-option value="186">Tom</r-option>
      <r-option value="187">Lucy</r-option>
    </r-select>