使用方式

<link rel="stylesheet" href="/components/style/select.css" type="text/css" />
<script defer src="/components/js/select.js" type="text/javascript"></script>

基本用法

<div class="st_select" st-model="selectModel" change="selectChange">
  <div class="st_input st_input_suffix">
    <input
      type="text"
      size="mini"
      readonly="readonly"
      placeholder="请选择"
      class="st_input_inner"
    />
    <span class="st_input_down"
      ><i class="stIconFont icon-xiala-down"></i
    ></span>
  </div>
  <div class="st_select_dropdown">
    <div class="st_select_dropdown_wrap">
      <ul class="st_select_dropdown_list">
        <li class="st_select_dropdown_item" value="1" label="选项一">选项一</li>
        <li class="st_select_dropdown_item" value="2" label="选项二">选项二</li>
        <li class="st_select_dropdown_item" value="3" label="选项三">选项三</li>
        <li class="st_select_dropdown_item" value="4" label="选项四">选项四</li>
        <li class="st_select_dropdown_item" value="5" label="选项五">选项五</li>
      </ul>
    </div>
    <div class="popper_arrow"></div>
  </div>
</div>

禁用

<div class="st_select" st-model="selectModel" change="selectChange">
  <div class="st_input st_input_suffix">
    <input
      type="text"
      size="mini"
      disabled
      readonly="readonly"
      placeholder="请选择"
      class="st_input_inner"
    />
    <span class="st_input_down"
      ><i class="stIconFont icon-xiala-down"></i
    ></span>
  </div>
  <div class="st_select_dropdown">
    <div class="st_select_dropdown_wrap">
      <ul class="st_select_dropdown_list">
        <li class="st_select_dropdown_item" value="1" label="选项一">选项一</li>
        <li class="st_select_dropdown_item" value="2" label="选项二">选项二</li>
        <li class="st_select_dropdown_item" value="3" label="选项三">选项三</li>
        <li class="st_select_dropdown_item" value="4" label="选项四">选项四</li>
        <li class="st_select_dropdown_item" value="5" label="选项五">选项五</li>
      </ul>
    </div>
    <div class="popper_arrow"></div>
  </div>
</div>

多选

<div
  class="st_select"
  multiple
  st-model="selectMultipleModel"
  change="selectMultipleChange"
>
  <div class="st_input st_input_suffix">
    <input
      type="text"
      readonly="readonly"
      placeholder="请选择"
      class="st_input_inner"
    />
    <span class="st_input_down"
      ><i class="stIconFont icon-xiala-down"></i
    ></span>
  </div>
  <div class="st_select_dropdown">
    <div class="st_select_dropdown_wrap">
      <ul class="st_select_dropdown_list">
        <li class="st_select_dropdown_item" value="1" label="选项一">选项一</li>
        <li class="st_select_dropdown_item" value="2" label="选项二">选项二</li>
        <li class="st_select_dropdown_item" value="3" label="选项三">选项三</li>
        <li class="st_select_dropdown_item" value="4" label="选项四">选项四</li>
        <li class="st_select_dropdown_item" value="5" label="选项五">选项五</li>
      </ul>
    </div>
    <div class="popper_arrow"></div>
  </div>
</div>

可搜索用法

<div class="st_select" st-model="selectModel" filterable>
  <div class="st_input st_input_suffix">
    <input
      type="text"
      size="mini"
      placeholder="请选择"
      class="st_input_inner"
    />
    <span class="st_input_down"
      ><i class="stIconFont icon-xiala-down"></i
    ></span>
  </div>
  <div class="st_select_dropdown">
    <div class="st_select_dropdown_wrap">
      <ul class="st_select_dropdown_list">
        <li class="st_select_dropdown_item" value="1" label="选项一">选项一</li>
        <li class="st_select_dropdown_item" value="2" label="选项二">选项二</li>
        <li class="st_select_dropdown_item" value="3" label="选项三">选项三</li>
        <li class="st_select_dropdown_item" value="4" label="选项四">选项四</li>
        <li class="st_select_dropdown_item" value="5" label="选项五">选项五</li>
      </ul>
    </div>
    <div class="popper_arrow"></div>
  </div>
</div>

属性

属性	说明	类型	可选值	默认值
st-model	数据绑定	string	-	-
change	输入值变化回调方法	string	-	-
disabled	同input组件用法	-	-	-
size	尺寸	string	medium/small/mini	-
multiple	多选	string	-	-
value	选择项值	string	-	-
label	选择项显示内容	string	-	-

属性添加位置请查看示例代码