ElementPlus Switch 開關(guān)

Switch 開關(guān)

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

基本用法

綁定v-model到一個(gè)Boolean類型的變量?？梢允褂胊ctive-color屬性與inactive-color屬性來設(shè)置開關(guān)的背景色。

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

<script>
  export default {
    data() {
      return {
        value: true,
      }
    },
  }
</script>

文字描述

使用active-text屬性與inactive-text屬性來設(shè)置開關(guān)的文字描述。

<template>
  <el-switch v-model="value1" active-text="按月付費(fèi)" inactive-text="按年付費(fèi)">
</el-switch>
<el-switch
  style="display: block"
  v-model="value2"
  active-color="#13ce66"
  inactive-color="#ff4949"
  active-text="按月付費(fèi)"
  inactive-text="按年付費(fèi)"
>
</el-switch>
</template>

<script>
  export default {
    data() {
      return {
        value1: true,
        value2: true,
      }
    },
  }
</script>

擴(kuò)展的 value 類型

設(shè)置active-value和inactive-value屬性，接受Boolean, String或Number類型的值。

<template>
  <el-tooltip :content="'Switch value: ' + value" placement="top">
  <el-switch
    v-model="value"
    active-color="#13ce66"
    inactive-color="#ff4949"
    active-value="100"
    inactive-value="0"
  >
  </el-switch>
</el-tooltip>
</template>

<script>
  export default {
    data() {
      return {
        value: '100',
      }
    },
  }
</script>

禁用狀態(tài)

設(shè)置disabled屬性，接受一個(gè)Boolean，設(shè)置true即可禁用。

<template>
  <el-switch v-model="value1" disabled> </el-switch>
<el-switch v-model="value2" disabled> </el-switch>
</template>

<script>
  export default {
    data() {
      return {
        value1: true,
        value2: false,
      }
    },
  }
</script>

加載中

設(shè)置loading屬性，接受一個(gè)Boolean，設(shè)置true即加載中狀態(tài)。

<template>
  <el-switch v-model="value1" loading> </el-switch>
<el-switch v-model="value2" loading> </el-switch>
</template>

<script>
  export default {
    data() {
      return {
        value1: true,
        value2: false,
      }
    },
  }
</script>

阻止切換

設(shè)置beforeChange屬性，若返回 false 或者返回 Promise 且被 reject，則停止切換。

<template>
  <el-switch v-model="value1" :loading="loading1" :beforeChange="beforeChange1">
</el-switch>
<el-switch v-model="value2" :loading="loading2" :beforeChange="beforeChange2">
</el-switch>
</template>

<script>
  import { reactive, toRefs } from 'vue'
  import { ElMessage } from 'element-plus'

  export default {
    setup() {
      const status1 = reactive({
        value1: false,
        loading1: false,
      })

      const beforeChange1 = () => {
        status1.loading1 = true
        return new Promise((resolve) => {
          setTimeout(() => {
            status1.loading1 = false
            ElMessage.success('切換成功')
            return resolve(true)
          }, 1000)
        })
      }

      const status2 = reactive({
        value2: false,
        loading2: false,
      })

      const beforeChange2 = () => {
        status2.loading2 = true
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            status2.loading2 = false
            ElMessage.error('切換失敗')
            return reject(new Error('error'))
          }, 1000)
        })
      }

      return {
        ...toRefs(status1),
        ...toRefs(status2),
        beforeChange1,
        beforeChange2,
      }
    },
  }
</script>

Attributes

參數(shù)	說明	類型	可選值	默認(rèn)值
model-value / v-model	綁定值，必須等于active-value或inactive-value，默認(rèn)為Boolean類型	boolean / string / number	—	—
disabled	是否禁用	boolean	—	false
loading	是否顯示加載中	boolean	—	false
width	switch 的寬度（像素）	number	—	40
active-icon-class	switch 打開時(shí)所顯示圖標(biāo)的類名，設(shè)置此項(xiàng)會忽略 active-text	string	—	—
inactive-icon-class	switch 關(guān)閉時(shí)所顯示圖標(biāo)的類名，設(shè)置此項(xiàng)會忽略 inactive-text	string	—	—
active-text	switch 打開時(shí)的文字描述	string	—	—
inactive-text	switch 關(guān)閉時(shí)的文字描述	string	—	—
active-value	switch 打開時(shí)的值	boolean / string / number	—	true
inactive-value	switch 關(guān)閉時(shí)的值	boolean / string / number	—	false
active-color	switch 打開時(shí)的背景色	string	—	#409EFF
inactive-color	switch 關(guān)閉時(shí)的背景色	string	—	#C0CCDA
border-color	switch 邊框顏色	string	—	—
name	switch 對應(yīng)的 name 屬性	string	—	—
validate-event	改變 switch 狀態(tài)時(shí)是否觸發(fā)表單的校驗(yàn)	boolean	—	true
before-change	switch 狀態(tài)改變前的鉤子，返回 false 或者返回 Promise 且被 reject 則停止切換	function	—	—

Events

Methods