ElementPlus Switch 開關

Switch 開關

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

基本用法

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

<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屬性來設置開關的文字描述。

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

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

擴展的 value 類型

設置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)

設置disabled屬性，接受一個Boolean，設置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>

加載中

設置loading屬性，接受一個Boolean，設置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>

阻止切換

設置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ù)	說明	類型	可選值	默認值
model-value / v-model	綁定值，必須等于active-value或inactive-value，默認為Boolean類型	boolean / string / number	—	—
disabled	是否禁用	boolean	—	false
loading	是否顯示加載中	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
border-color	switch 邊框顏色	string	—	—
name	switch 對應的 name 屬性	string	—	—
validate-event	改變 switch 狀態(tài)時是否觸發(fā)表單的校驗	boolean	—	true
before-change	switch 狀態(tài)改變前的鉤子，返回 false 或者返回 Promise 且被 reject 則停止切換	function	—	—

Events

Methods