Weirdo-UI

Appearance

Button 按钮 ​

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

基础用法 ​

绑定 v-model 到一个 Boolean 类型的变量。 可以使用 activeColor 属性与 inactiveColor 属性来设置开关的背景色。

基础用法
Switch 组件的基础用法
<template lang="">
  <div>
    <el-switch v-model="value1"/>
    <el-switch v-model="value2" activeColor="green" inactiveColor="red"/>
  </div>
</template>
<script setup>
import ElSwitch from '@/components/Switch/Switch.vue'
import { ref } from 'vue'
const value1 = ref(true)
const value2 = ref(true)
</script>

文字描述 ​

使用active-text属性与inactive-text属性来设置开关的文字描述。 使用 inline-prompt 属性来控制文本是否显示在点内。 使用active-text属性与inactive-text属性来设置开关的文字描述。

文字描述
off
on
on
<template lang="">
  <div>
    
    <el-switch v-model="value1" activeText="on" inactiveText="off"></el-switch>
    <el-switch v-model="value2" activeText="on" inlinePrompt inactiveText="off"></el-switch>
  </div>
</template>
<script setup>
import ElSwitch from '@/components/Switch/Switch.vue'
import { ref } from 'vue'
const value1 = ref(true)
const value2 = ref(true)
</script>

扩展的value类型 ​

你可以设置 active-value 和 inactive-value 属性， 它们接受 Boolean、String 或 Number 类型的值。

扩展的value类型

1

<template lang="">
  <div>
    
    <el-switch v-model="rightValue" :activeValue="1" :inactiveValue="0"></el-switch>
    <p>{{ rightValue }}</p>
  </div>
</template>
<script setup>
import ElSwitch from '@/components/Switch/Switch.vue'
import { ref } from 'vue'
const rightValue = ref(1)
</script>

禁用 ​

设置disabled属性，接受一个Boolean，设置true即可禁用。

禁用
<template lang="">
  <div>
    
    <el-switch v-model="value1" disabled/>
  </div>
</template>
<script setup>
import ElSwitch from '@/components/Switch/Switch.vue'
import { ref } from 'vue'
const value1 = ref(true)
</script>

尺寸 ​

设置disabled属性，接受一个Boolean，设置true即可禁用。

尺寸大小
<template lang="">
  <div>
    <el-switch v-model="value1" size="small"/>
    <el-switch v-model="value1" size="large"/>
  </div>
</template>
<script setup>
import ElSwitch from '@/components/Switch/Switch.vue'
import { ref } from 'vue'
const value1 = ref(true)
</script>