1. Switch開關(guān)

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

1.2. 開關(guān)屬性

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

1.3. 開關(guān)事件

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

1.4. 開關(guān)方法

方法名	說明
focus	使Switch獲取焦點(diǎn)

2. Switch開關(guān)例子

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

2.2. 編寫App.vue?

<template><div id="app"><h1>基本用法</h1><h4>綁定v-model到一個Boolean類型的變量。可以使用active-color屬性與inactive-color屬性來設(shè)置開關(guān)的背景色。</h4><el-switch v-model="base_value" active-color="#13ce66" inactive-color="#ff4949"></el-switch><h1>文字描述</h1><h4>使用active-text屬性與inactive-text屬性來設(shè)置開關(guān)的文字描述。</h4><el-switch v-model="text_value1" active-text="按月付費(fèi)" inactive-text="按年付費(fèi)" @change="handleChange"></el-switch><el-switch style="display: block" v-model="text_value2" active-color="#13ce66" inactive-color="#ff4949" active-text="按月付費(fèi)" inactive-text="按年付費(fèi)"></el-switch><h1>擴(kuò)展的value類型</h1><h4>設(shè)置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>設(shè)置disabled屬性, 接受一個Boolean, 設(shè)置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. 運(yùn)行項(xiàng)目

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。