⌘

Switch 开关

就跟电灯开关一样

import { DuSwitch } from 'dangoui'

示例

基础

<template>
  <PreviewBlock title="简单">
    <DuSwitch v-model:on="isOn" />
  </PreviewBlock>
  <PreviewBlock title="禁用">
    <DuSwitch v-model:on="isOn" disabled />
  </PreviewBlock>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DuSwitch } from 'dangoui'

const isOn = ref(false)
</script>

使用色板颜色

<template>
  <PreviewBlock title="secondary">
    <DuSwitch v-model:on="isOn" color="secondary" />
    <DuSwitch v-model:on="isOn" color="secondary" disabled />
  </PreviewBlock>
  <PreviewBlock title="success">
    <DuSwitch v-model:on="isOn" color="success" />
    <DuSwitch v-model:on="isOn" color="success" disabled />
  </PreviewBlock>
  <PreviewBlock title="warning">
    <DuSwitch v-model:on="isOn" color="warning" />
    <DuSwitch v-model:on="isOn" color="warning" disabled />
  </PreviewBlock>
  <PreviewBlock title="error">
    <DuSwitch v-model:on="isOn" color="error" />
    <DuSwitch v-model:on="isOn" color="error" disabled />
  </PreviewBlock>
  <PreviewBlock title="trade">
    <DuSwitch v-model:on="isOn" color="trade" />
    <DuSwitch v-model:on="isOn" color="trade" disabled />
  </PreviewBlock>
  <PreviewBlock title="default">
    <DuSwitch v-model:on="isOn" color="default" />
    <DuSwitch v-model:on="isOn" color="default" disabled />
  </PreviewBlock>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DuSwitch } from 'dangoui'

const isOn = ref(false)
</script>

API

属性

属性名	类型	默认值	说明
color	`string`	`"primary"`	色彩，可以使用色板中的颜色名
disabled	`boolean`	`false`	是否禁用
on	`boolean`	`false`	是否打开

事件

名称	类型
update:on	`(event: "update:on", on: boolean): void`

本页包含