ElementPlus Switch 开关

Switch 开关

表示两种相互对立的状态间的切换,多用于触发「开/关」。

基本用法

ElementPlus Switch 开关

绑定v-model到一个Boolean类型的变量。可以使用active-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>

文字描述

ElementPlus Switch 开关

使用active-text属性与inactive-text属性来设置开关的文字描述。

<template>
  <el-switch v-model="value1" active-text="按月付费" inactive-text="按年付费">
</el-switch>
<el-switch
  style=""
  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 类型

ElementPlus Switch 开关

设置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>

禁用状态

ElementPlus Switch 开关

设置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>

加载中

ElementPlus Switch 开关

设置loading属性,接受一个Boolean,设置true即加载中状态。

<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>

阻止切换

ElementPlus Switch 开关

设置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

参数说明类型可选值默认值
model-value / v-model绑定值,必须等于active-valueinactive-value,默认为Boolean类型boolean / string / number
disabled是否禁用booleanfalse
loading是否显示加载中booleanfalse
widthswitch 的宽度(像素)number40
active-icon-classswitch 打开时所显示图标的类名,设置此项会忽略 active-textstring
inactive-icon-classswitch 关闭时所显示图标的类名,设置此项会忽略 inactive-textstring
active-textswitch 打开时的文字描述string
inactive-textswitch 关闭时的文字描述string
active-valueswitch 打开时的值boolean / string / numbertrue
inactive-valueswitch 关闭时的值boolean / string / numberfalse
active-colorswitch 打开时的背景色string#409EFF
inactive-colorswitch 关闭时的背景色string#C0CCDA
border-colorswitch 边框颜色string
nameswitch 对应的 name 属性string
validate-event改变 switch 状态时是否触发表单的校验booleantrue
before-changeswitch 状态改变前的钩子,返回 false 或者返回 Promise 且被 reject 则停止切换function

Events

事件名称说明回调参数
changeswitch 状态发生变化时的回调函数新状态的值

Methods

方法名说明参数
focus使 Switch 获取焦点

作者:唐伯虎点蚊香,如若转载,请注明出处:https://www.web176.com/elementplus/19868.html

(0)
打赏 支付宝 支付宝 微信 微信
唐伯虎点蚊香的头像唐伯虎点蚊香
上一篇 2023年5月8日
下一篇 2023年5月8日

相关推荐

发表回复

登录后才能评论