1. Switch開關

1.1. 表示兩種相互對立的狀態(tài)間的切換, 多用于觸發(fā)「開/關」。

1.2. 開關屬性

參數(shù)	說明	類型	默認值
value / v-model	綁定值	boolean / string / number	無
disabled	是否禁用	boolean	false
width	switch的寬度(像素)	number	40
active-icon-class	switch打開時所顯示圖標的類名, 設置此項會忽略active-text	string	無
inactive-icon-class	switch關閉時所顯示圖標的類名, 設置此項會忽略inactive-text	string	無
active-text	switch打開時的文字描述	string	無
inactive-text	switch關閉時的文字描述	string	無
active-value	switch打開時的值	boolean / string / number	true
inactive-value	switch關閉時的值	boolean / string / number	false
active-color	switch打開時的背景色	string	#409EFF
inactive-color	switch關閉時的背景色	string	#C0CCDA
name	switch對應的name屬性	string	無
validate-event	改變switch狀態(tài)時是否觸發(fā)表單的校驗	boolean	true

1.3. 開關事件

事件名稱	說明	回調參數(shù)
change	switch狀態(tài)發(fā)生變化時的回調函數(shù)	新狀態(tài)的值

1.4. 開關方法

方法名	說明
focus	使Switch獲取焦點

2. Switch開關例子

2.1. 使用腳手架新建一個名為element-ui-switch的前端項目, 同時安裝Element插件。

2.2. 編寫App.vue?

<template><div id="app"><h1>基本用法</h1><h4>綁定v-model到一個Boolean類型的變量。可以使用active-color屬性與inactive-color屬性來設置開關的背景色。</h4><el-switch v-model="base_value" active-color="#13ce66" inactive-color="#ff4949"></el-switch><h1>文字描述</h1><h4>使用active-text屬性與inactive-text屬性來設置開關的文字描述。</h4><el-switch v-model="text_value1" active-text="按月付費" inactive-text="按年付費" @change="handleChange"></el-switch><el-switch style="display: block" v-model="text_value2" active-color="#13ce66" inactive-color="#ff4949" active-text="按月付費" inactive-text="按年付費"></el-switch><h1>擴展的value類型</h1><h4>設置active-value和inactive-value屬性, 接受Boolean、String或Number類型的值。</h4><el-tooltip :content="'Switch value: ' + ext_value" placement="top"><el-switch v-model="ext_value" active-color="#13ce66" inactive-color="#ff4949" active-value="100" inactive-value="0"></el-switch></el-tooltip><h1>禁用狀態(tài)</h1><h4>設置disabled屬性, 接受一個Boolean, 設置true即可禁用。</h4><el-switch v-model="disabled_value1" disabled></el-switch><el-switch v-model="disabled_value2" disabled></el-switch></div> </template><script> export default {data () {return {base_value: true,text_value1: true,text_value2: true,ext_value: '100',disabled_value1: true,disabled_value2: false}},methods: {handleChange (val) {console.log(val)}} } </script>

2.3. 運行項目

總結

以上是生活随笔為你收集整理的012_Switch开关的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。