SSwitch <s-switch>

用于开启或关闭某项设置的开关。 SSwitch 是 Shopify Polaris <s-switch> web component 的带类型 Vue 3 wrapper。

import { SSwitch } from 'polaris-vue-elements'

最佳实践

• 不要将开关与保存按钮搭配使用。 开关一经切换便立即生效，因此添加保存按钮会让商家不确定更改究竟何时生效。
• 让设置项一目了然。 编写一个 label，告诉商家这个开关控制什么，以及开和关分别意味着什么，免得他们必须拨动一下才能弄清楚。
• 说明后果。 使用 details 解释切换开关后会发生什么变化，尤其是影响重要功能或数据的设置，让商家能够放心地做出决定。
• 将相关开关分组并排序。 当页面上有多个开关时，将相关设置按合理的顺序放在一起，让商家能轻松找到并配置它们。
• 解释开关不可用的原因。 当开关因权限、依赖关系或套餐限制而处于 disabled 状态时，告诉商家原因、是否只是暂时的，以及需要做什么才能启用它。

<SSwitch label="Send order confirmation emails" details="Customers get an email as soon as they place an order." />

参阅 Shopify 关于 <s-switch> 的最佳实践（英文）以获取完整指南。

示例

On: false

<script setup>
import { ref } from 'vue'
import { SSwitch } from 'polaris-vue-elements'

const value = ref(false)
</script>

<template>
  <SSwitch label="Enable notifications" v-model="value" />
  <p>On: {{ value }}</p>
</template>

v-model

<SSwitch> 上的 v-model 绑定到 checked property，并监听 change DOM 事件。

<SSwitch v-model="value" />

等价于：

<SSwitch :checked="value" @change="value = $event.target.checked" />

Props

Prop	类型	说明
accessibilityLabel	string	供屏幕阅读器等辅助技术用户使用的标签。设置后，提供的任何子元素或 label 都不会被朗读。也可以借此显示一个没有可见标签的控件，同时仍为屏幕阅读器用户提供上下文。
checked	boolean	控件是否处于激活状态。
defaultChecked	boolean	控件默认是否处于激活状态。
details	any	为字段提供上下文或指引的附加文本。该文本会与字段及其标签一起显示，为用户提供更多信息或说明。它也会提供给屏幕阅读器用户。
disabled	boolean	禁用控件，不允许任何交互。
error	any	向用户提示错误。字段会采用特定的样式处理，以传达必须立即解决的问题。
label	any	用作控件标签的可视内容。
labelAccessibilityVisibility	"visible" | "exclusive"	更改组件标签的可见性。 - visible：标签对所有用户可见。 - exclusive：标签在视觉上隐藏，但仍保留在无障碍树中。
name	string	控件的标识符，在最近的外层 Form 组件内唯一。
required	boolean	字段是否需要填写值。此要求会为字段添加语义，但不会自动显示错误。如果希望在字段为空时显示错误，可以使用 error 属性。
value	string	控件被选中时在表单数据中使用的值。

Events

Event	类型
blur	FocusEvent
change	Event
input	Event

在 <SSwitch> 上使用 @blur 形式的监听器来监听这些事件。