Form-switch开关

╰+哭是因爲堅強的太久メ 2022-03-30 08:18 264阅读 0赞

<el-switch
      v-model="value2"
      active-color="#13ce66"
      inactive-color="#ff4949">
    </el-switch>

![20190123173231753.png][]

<el-switch
      v-model="value3"
      active-text="按月付费"
      inactive-text="按年付费">
    </el-switch>
    
    <el-switch
      style="display: block"
      v-model="value4"
      active-color="#13ce66"
      inactive-color="#ff4949"
      active-text="按月付费"
      inactive-text="按年付费">
    </el-switch>

### Attributes ###

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>disabled</td> 
   <td>是否禁用</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>switch 的宽度（像素）</td> 
   <td>number</td> 
   <td>—</td> 
   <td>40</td> 
  </tr> 
  <tr> 
   <td>active-text</td> 
   <td>switch 打开时的文字描述</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>inactive-text</td> 
   <td>switch 关闭时的文字描述</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>active-value</td> 
   <td>switch 打开时的值</td> 
   <td>boolean / string / number</td> 
   <td>—</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>inactive-value</td> 
   <td>switch 关闭时的值</td> 
   <td>boolean / string / number</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>active-color</td> 
   <td>switch 打开时的背景色</td> 
   <td>string</td> 
   <td>—</td> 
   <td>#409EFF</td> 
  </tr> 
  <tr> 
   <td>inactive-color</td> 
   <td>switch 关闭时的背景色</td> 
   <td>string</td> 
   <td>—</td> 
   <td>#C0CCDA</td> 
  </tr> 
 </tbody> 
</table>

[20190123173231753.png]: /images/20220330/f2cafc0fa08e4effb7cca599b557afd5.png