开关选择器

开关选择器组件。

基础使用

通过 v-model 属性绑定开关状态。

<template>
	<pure-switch v-model="isChecked"></pure-switch>
</template>
<script setup>
	import { ref } from "vue";

	// 开关状态
	const isChecked = ref(false);
</script>

内部文本

将 mode 属性设置为 inner 即可开启内部文本模式。

• 通过 onText 属性设置开启状态的文本。
• 通过 offText 属性设置关闭状态的文本。

<template>
	<pure-switch
		v-model="isChecked"
		mode="inner"
		onText="开启"
		offText="关闭"
	></pure-switch>
</template>

外部文本

将 mode 属性设置为 outer 即可开启外部文本模式。

• 通过 onText 属性设置开启状态的文本。
• 通过 offText 属性设置关闭状态的文本。

<template>
	<pure-switch
		v-model="isChecked"
		mode="outer"
		onText="开启"
		offText="关闭"
	></pure-switch>
</template>

圆点文本

将 mode 属性设置为 circle 即可开启圆点文本模式。

• 通过 onText 属性设置开启状态的文本。
• 通过 offText 属性设置关闭状态的文本。

<template>
	<pure-switch
		v-model="isChecked"
		mode="circle"
		onText="开"
		offText="关"
	></pure-switch>
</template>

图标模式

将 mode 属性设置为 icon 即可开启图标模式。

• 通过 onText 属性设置开启状态的图标名称。
• 通过 offText 属性设置关闭状态的图标名称。

<template>
	<pure-switch
		v-model="isChecked"
		mode="icon"
		onText="__checked"
		offText="__close"
	></pure-switch>
</template>

异步切换

将 async 属性设置为 true 后组件不自动更新状态，需要通过 onClick 事件手动更新状态。

• 通过 loading 属性设置是否显示加载状态。

<template>
	<pure-switch
		v-model="isChecked"
		async
		:loading="loading"
		@onClick="handleClick"
	></pure-switch>
</template>

<script setup>
	import { ref } from "vue";

	const isChecked = ref(false);
	const loading = ref(false);

	// 手动切换
	function handleClick() {
		loading.value = true;
		let timer = setTimeout(() => {
			isChecked.value = !isChecked.value;
			loading.value = false;
			clearTimeout(timer);
		}, 2500);
	}
</script>

主题

通过 theme 属性设置徽标主题。

<template>
	<pure-badge value="主要" theme="primary"></pure-badge>
	<pure-badge value="成功" theme="success"></pure-badge>
	<pure-badge value="警告" theme="warning"></pure-badge>
	<pure-badge value="错误" theme="error"></pure-badge>
	<pure-badge value="信息" theme="info"></pure-badge>
</template>

幽灵样式

通过 ghost 属性设置徽标幽灵样式。

<template>
	<pure-badge value="主要" ghost theme="primary"></pure-badge>
	<pure-badge value="成功" ghost theme="success"></pure-badge>
	<pure-badge value="警告" ghost theme="warning"></pure-badge>
	<pure-badge value="错误" ghost theme="error"></pure-badge>
	<pure-badge value="信息" ghost theme="info"></pure-badge>
</template>

属性

名称	类型	默认值	说明
hoverClass	String	pure-hover	按下去的样式类
v-model	Boolean	false	开关状态
disabled	Boolean	false	是否禁用
readonly	Boolean	false	是否只读
theme	String		主题
ghost	Boolean	false	幽灵样式
async	Boolean	false	是否异步切换状态
mode	String		模式，可选值为 inner、outer、circle、icon
loading	Boolean	false	是否显示加载状态
loadingIconName	String	__loading	加载图标名称
offText	String	"关" 或 "__close"	关闭时的文本或图标名称
onText	String	"开" 或 "__checked"	开启时的文本或图标名称
width	String	3.5em	开关宽度（不包含外部文本）
height	String	2em	开关高度
gap	String	2px	圆点距离边框的距离

事件

名称	参数	说明
onClick		点击事件

插槽

名称	参数	说明
#default		默认，开关内部内容，会替换内部文本

样式变量

名称	说明
--pure-switch-width	宽（不包含外部文本）
--pure-switch-height	高
--pure-switch-border-radius	圆角大小
--pure-switch-gap	开关与外部文本的距离
--pure-switch-transition	过渡效果
--pure-switch-circle-gap	内圆距离边框的距离
--pure-switch-background	背景
--pure-switch-background-opacity	背景透明度
--pure-switch-border-width	边框宽度
--pure-switch-border-style	边框类型
--pure-switch-border-color	边框颜色
--pure-switch-circle-size	内圆大小
--pure-switch-circle-border-radius	内圆圆角大小
--pure-switch-circle-background	内圆背景
--pure-switch-circle-opacity	内圆透明度
--pure-switch-content-padding	内容内边距
--pure-switch-texts-font-size	文本字体大小
--pure-switch-texts-font-weight	文本字体粗细
--pure-switch-texts-color	文本颜色
--pure-switch-texts-padding	文本内边距
--pure-switch-on-text-color	开启时的文本颜色
--pure-switch-off-text-color	关闭时的文本颜色
--pure-switch-loading-animation-duration	加载动画持续时间
--pure-switch-loading-animation-timing-function	加载动画过渡函数
--pure-switch-icon-font-size	图标字体大小
--pure-switch-loading-color	加载图标颜色