Tuniao UI Uniapp V3

Appearance

12:13

TnSwitch 开关 ​

Switch 开关一般用于状态的打开和关闭之间进行切换

组件位置 ​

typescript
import TnSwitch from '@tuniao/tnui-vue3-uniapp/components/switch/src/switch.vue'
import TnSwitch from '@tuniao/tnui-vue3-uniapp/components/switch/src/switch.vue'
typescript
import TnSwitch from '@/uni_modules/tuniaoui-vue3/components/switch/src/switch.vue'
import TnSwitch from '@/uni_modules/tuniaoui-vue3/components/switch/src/switch.vue'

平台差异说明 ​

App(vue)H5微信小程序支付宝小程序...
√√√√适配中

基本使用 ​

  • 通过v-model绑定开关状态
  • 通过shape设置开关形状，可选值为round、square，对应为椭圆和圆角方形
  • 通过size设置开关大小，可选值为sm、lg
  • 通过width单独设置开关宽度，默认单位为 rpx，可以传递带单位的字符串
  • 通过disabled设置开关是否禁用
  • 通过loading设置开关是否处于加载状态，此时加载状态会显示在开关上，并且是不允许点击的
vue
<script lang="ts" setup>
import { ref } from 'vue'

const selectValue = ref<boolean>(false)
</script>

<template>
  <TnSwitch v-model="selectValue" />
  <TnSwitch v-model="selectValue" disabled />
  <TnSwitch v-model="selectValue" loading />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const selectValue = ref<boolean>(false)
</script>

<template>
  <TnSwitch v-model="selectValue" />
  <TnSwitch v-model="selectValue" disabled />
  <TnSwitch v-model="selectValue" loading />
</template>
vue
<script lang="ts" setup>
import { ref } from 'vue'

const selectValue = ref<boolean>(false)
</script>

<template>
  <TnSwitch v-model="selectValue" shape="square" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const selectValue = ref<boolean>(false)
</script>

<template>
  <TnSwitch v-model="selectValue" shape="square" />
</template>
vue
<script lang="ts" setup>
import { ref } from 'vue'

const selectValue = ref<boolean>(false)
</script>

<template>
  <TnSwitch v-model="selectValue" size="sm" />
  <TnSwitch v-model="selectValue" width="140" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const selectValue = ref<boolean>(false)
</script>

<template>
  <TnSwitch v-model="selectValue" size="sm" />
  <TnSwitch v-model="selectValue" width="140" />
</template>

修改激活和非激活状态下的颜色 ​

通过active-color和inactive-color设置激活和非激活状态下的颜色，支持rgb、rgba、hex，图鸟 UI 内置的普通颜色的值

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

const selectValue = ref<boolean>(false)
</script>

<template>
  <TnSwitch
    v-model="selectValue"
    active-color="tn-blue"
    inactive-color="tn-blue-light"
  />
  <TnSwitch
    v-model="selectValue"
    active-color="#01beff"
    inactive-color="rgba(1, 190, 250, 0.5)"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const selectValue = ref<boolean>(false)
</script>

<template>
  <TnSwitch
    v-model="selectValue"
    active-color="tn-blue"
    inactive-color="tn-blue-light"
  />
  <TnSwitch
    v-model="selectValue"
    active-color="#01beff"
    inactive-color="rgba(1, 190, 250, 0.5)"
  />
</template>

修改激活和非激活状态下的值 ​

通过active-value和inactive-value设置激活和非激活状态下的值，可以是string、number、boolean，默认值分别为true和false

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

const selectValue = ref<number>(0)
</script>

<template>
  <TnSwitch v-model="selectValue" :active-value="1" :inactive-value="0" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const selectValue = ref<number>(0)
</script>

<template>
  <TnSwitch v-model="selectValue" :active-value="1" :inactive-value="0" />
</template>

修改激活和非激活状态下的文案 ​

通过active-text和inactive-text设置激活和非激活状态下的文案，设置了文案后 Switch 开关的宽度默认会根据文案的长度进行自适应，如果需要自定义宽度，可以通过width单独设置开关宽度

通过active-icon和inactive-icon设置激活和非激活状态下的图标，如果设置了文案会覆盖图标的设置

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

const selectValue = ref<number>(0)
</script>

<template>
  <TnSwitch
    v-model="selectValue"
    :active-value="1"
    :inactive-value="0"
    active-text="打开开关"
    inactive-text="关闭开关"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const selectValue = ref<number>(0)
</script>

<template>
  <TnSwitch
    v-model="selectValue"
    :active-value="1"
    :inactive-value="0"
    active-text="打开开关"
    inactive-text="关闭开关"
  />
</template>
vue
<script lang="ts" setup>
import { ref } from 'vue'

const selectValue = ref<number>(0)
</script>

<template>
  <TnSwitch
    v-model="selectValue"
    :active-value="1"
    :inactive-value="0"
    active-icon="success-circle-fill"
    inactive-icon="close-fill"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const selectValue = ref<number>(0)
</script>

<template>
  <TnSwitch
    v-model="selectValue"
    :active-value="1"
    :inactive-value="0"
    active-icon="success-circle-fill"
    inactive-icon="close-fill"
  />
</template>

阻止切换 ​

设置before-change属性，若返回false或者Promise且被reject，则阻止切换

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

const selectValue = ref<boolean>(false)

const beforeChange = (): Promise<boolean> => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // resolve(false)
      reject()
    }, 2000)
  })
}
</script>

<template>
  <TnSwitch v-model="selectValue" :before-change="beforeChange" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const selectValue = ref<boolean>(false)

const beforeChange = (): Promise<boolean> => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // resolve(false)
      reject()
    }, 2000)
  })
}
</script>

<template>
  <TnSwitch v-model="selectValue" :before-change="beforeChange" />
</template>

API ​

Props ​

属性名说明类型默认值可选值
model-value/v-modelSwitch 开关绑定的值String | Number ｜ Boolean--
shapeSwitch 开关的形状Stringroundsquare
sizeSwitch 开关尺寸String-sm / lg
widthSwitch 开关宽度，默认单位为 rpx，可以传入带单位的尺寸值String | Number--
disabled禁用 SwitchBooleanfalsetrue
loadingSwitch 开关是否在加载状态Booleanfalsetrue
inactive-color未选中时的颜色，以 tn 开头则使用图鸟内置的颜色只支持普通颜色String--
active-color选中时的颜色，以 tn 开头则使用图鸟内置的颜色只支持普通颜色String--
inactive-text未选中时显示的文本，如果设置了该值，则不显示图标String--
active-text选中时显示的文本，如果设置了该值，则不显示图标String--
inactive-icon未选中时显示的图标String-图标有效值
active-icon选中时显示的图标String-图标有效值
inactive-value未选中时的值String |Number ｜ Booleanfalse-
active-value选中时的值String |Number ｜ Booleantrue-
custom-style在外部自定义组件样式CSSProperties{}-
custom-class在外部作用于组件的类String--
validate-event值发生修改时是否触发表单验证Booleantruefalse
before-change状态改变前的钩子， 返回 false 或者返回 Promise 且被 reject 则停止切换() => Promise<boolean> | boolean --

Events ​

事件名说明类型
changeswitch 状态发生变化时的回调函数(value: string | number | boolean) => void

Tuniao UI

Copyright © 2019-present Evan You,Made with ❤️ by Tuniao UI