开关选择器 Switch

开关选择器组件。

兼容性

• 兼容：✅
• 不兼容：❌
• 未知：❔

H5	安卓	苹果	微信	支付宝	百度	抖音	QQ	快手	飞书	京东
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

小红书	鸿蒙	360	华为快应用	快应用联盟
✅	❔	❔	❔	❔

插件市场地址

DCloud 插件市场地址

基础使用

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

<template>
    <pure-switch v-model="isChecked"></pure-switch>
</template>

状态文字

• 通过 openText 属性设置开启状态文字。
• 通过 closeText 属性设置关闭状态文字。

<template>
    <pure-switch v-model="isChecked" openText="开" closeText="关"></pure-switch>
</template>

状态图标

• 通过 openIcon 属性设置开启状态图标。
• 通过 closeIcon 属性设置关闭状态图标。

<template>
    <pure-switch v-model="isChecked" openText="开" closeText="关" openIcon="__wancheng" closeIcon="__shibai"></pure-switch>
</template>

加载状态

• 通过 loading 属性设置加载状态。
• 通过 loadingIcon 属性设置加载状态图标。

<template>
    <pure-switch v-model="isChecked" openText="开" closeText="关" loading></pure-switch>
    <pure-switch v-model="isChecked" openText="开" closeText="关" loading loadingIcon="__shalou"></pure-switch>
</template>

禁用状态

• 通过 disabled 属性设置禁用状态。

<template>
    <pure-switch v-model="isChecked" openText="开" closeText="关" openIcon="__wancheng" closeIcon="__shibai" disabled></pure-switch>
</template>

异步控制

• 通过 async 属性开启/关闭异步控制。
• 通过 @asyncChange 事件监听异步控制事件。

<template>
    <pure-switch
        v-model="isChecked"
        openText="开"
        closeText="关"
        openIcon="__wancheng"
        closeIcon="__shibai"
        async
        :loading="loading"
        @asyncChange="handleAsyncChange"
    ></pure-switch>
</template>

主题

• 通过添加辅助类使用。

提示

辅助类使用规则

<template>
    <pure-switch v-model="isChecked" class="pure-switch-primary"></pure-switch>
    <pure-switch v-model="isChecked" class="pure-switch-success"></pure-switch>
    <pure-switch v-model="isChecked" class="pure-switch-danger"></pure-switch>
    <pure-switch v-model="isChecked" class="pure-switch-warning"></pure-switch>
    <pure-switch v-model="isChecked" class="pure-switch-info"></pure-switch>
</template>

Props

属性名	说明	类型	默认值	可选值	版本
v-model	开关状态	Boolean	false	true	+1.0.0
openText	开启状态文字	String	""	-	+1.0.0
closeText	关闭状态文字	String	""	-	+1.0.0
openIcon	开启状态图标名称，同图标组件（Icon）的 name 属性，参考	String	""	-	+1.0.0
closeIcon	关闭状态图标名称，同图标组件（Icon）的 name 属性，参考	String	""	-	+1.0.0
loading	是否显示加载状态	Boolean	false	true	+1.0.0
loadingIcon	加载图标名称，同图标组件（Icon）的 name 属性，参考	String	__loading	-	+1.0.0
disabled	禁用状态	Boolean	false	true	+1.0.0
disabledClass	禁用类名	String	pure-disabled	-	+1.0.0
loading	加载状态	Boolean	false	true	+1.0.0
loadingText	加载提示文本	String	""	-	+1.0.0
async	是否开启异步控制	Boolean	false	true	+1.0.0

Event

事件名	说明	回调参数	版本
asyncChange	开启异步控制后的监听事件	-	+1.0.0