使用方式

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

基本用法

<div
  class="st_switch"
  active-color="#13ce66"
  inactive-color="#ff4949"
  st-model="switchModel"
  change="switchChange"
>
  <span class="st_switch_core"></span>
</div>

文字描述

<div class="st_switch" active-text="按月付费" inactive-text="按年付费">
  <span class="st_switch_core"></span>
</div>
<div
  class="st_switch"
  active-text="按月付费"
  inactive-text="按年付费"
  active-color="#13ce66"
  inactive-color="#ff4949"
  style="display: block;margin:20px 20px 20px 0"
>
  <span class="st_switch_core"></span>
</div>

禁用状态

<div class="st_switch is_checked is_disabled" disabled>
  <span class="st_switch_core"></span>
</div>
<div class="st_switch is_disabled" disabled>
  <span class="st_switch_core"></span>
</div>

属性

属性	说明	类型	可选值	默认值
st-model	数据绑定	string	-	-
change	输入值变化回调方法	function	-	-
disabled	是否禁用	-	-	-
active-text	选中文本	string	-	-
inactive-text	未选中文本	string	-	-
active-color	选中颜色	string	-	-
inactive-color	未选中颜色	string	-	-