开关 ​

<template>
  <DemoBlock>
    <div class="demo-block__stack">
      <div class="demo-block__section">
        <span class="demo-block__caption">系统通知</span>
        <strong>使用默认主题色切换状态</strong>
        <el-switch v-model="value1" />
        <p>默认尺寸已经保留足够的触控面积，不需要额外包裹额外样式。</p>
      </div>

      <div class="demo-block__section">
        <span class="demo-block__caption">营销提醒</span>
        <strong>通过 Element Plus 颜色变量定制状态色</strong>
        <el-switch
          v-model="value2"
          style="
            --el-switch-on-color: var(--el-color-success);
            --el-switch-off-color: var(--el-color-danger);
          "
        />
        <p>需要定制状态色时，优先使用 `--el-color-*` 变量以兼容深色模式。</p>
      </div>
    </div>
  </DemoBlock>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import DemoBlock from '../components/demo-block.vue'

const value1 = ref(true)
const value2 = ref(true)
</script>

<template>
  <DemoBlock>
    <div class="demo-block__stack">
      <div class="demo-block__section">
        <span class="demo-block__caption">large</span>
        <strong>适合关键设置项或老年模式</strong>
        <el-switch
          v-model="largeValue"
          size="large"
          active-text="开启"
          inactive-text="关闭"
        />
      </div>

      <div class="demo-block__section">
        <span class="demo-block__caption">default</span>
        <strong>推荐作为表单的默认尺寸</strong>
        <el-switch
          v-model="defaultValue"
          active-text="开启"
          inactive-text="关闭"
        />
      </div>

      <div class="demo-block__section">
        <span class="demo-block__caption">small</span>
        <strong>在紧凑信息区中使用，但仍保留足够的触控面积</strong>
        <el-switch
          v-model="smallValue"
          size="small"
          active-text="开启"
          inactive-text="关闭"
        />
      </div>
    </div>
  </DemoBlock>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import DemoBlock from '../components/demo-block.vue'

const largeValue = ref(true)
const defaultValue = ref(true)
const smallValue = ref(true)
</script>

<template>
  <DemoBlock>
    <div class="demo-block__stack">
      <div class="demo-block__section">
        <span class="demo-block__caption">外侧文字</span>
        <strong>将状态含义放在开关两侧，更适合较长文案</strong>
        <el-switch
          v-model="billingCycle"
          active-text="按月订阅"
          inactive-text="按年订阅"
        />
        <p>当需要完整描述状态时，优先把文字放在开关外侧，避免挤压主体。</p>
      </div>

      <div class="demo-block__section">
        <span class="demo-block__caption">行内提示</span>
        <strong>开关内部仅保留简短提示词</strong>
        <el-switch
          v-model="autoRenew"
          inline-prompt
          active-text="是"
          inactive-text="否"
        />
        <p>`inline-prompt` 适合一到两个字的简短状态，不建议塞入完整句子。</p>
      </div>

      <div class="demo-block__section">
        <span class="demo-block__caption">自定义宽度</span>
        <strong>需要更宽触控目标时可自定义宽度</strong>
        <el-switch
          v-model="wideControl"
          width="72"
          inline-prompt
          style="
            --el-switch-on-color: var(--el-color-success);
            --el-switch-off-color: var(--el-color-danger);
          "
          active-text="开"
          inactive-text="关"
        />
        <p>自定义宽度适合无障碍或高频操作场景，但文案仍应保持简短。</p>
      </div>
    </div>
  </DemoBlock>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import DemoBlock from '../components/demo-block.vue'

const billingCycle = ref(true)
const autoRenew = ref(true)
const wideControl = ref(true)
</script>

<template>
  <DemoBlock>
    <div class="demo-block__stack">
      <div class="demo-block__section">
        <span class="demo-block__caption">外侧图标</span>
        <strong>在开关两侧展示更完整的状态图标</strong>
        <el-switch
          v-model="value1"
          :active-icon="Check"
          :inactive-icon="Close"
        />
      </div>

      <div class="demo-block__section">
        <span class="demo-block__caption">行内图标</span>
        <strong>在开关内部放入图标，适合更紧凑的列表</strong>
        <el-switch
          v-model="value2"
          inline-prompt
          :active-icon="Check"
          :inactive-icon="Close"
        />
      </div>
    </div>
  </DemoBlock>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import DemoBlock from '../components/demo-block.vue'
import Check from '~icons/ep/check'
import Close from '~icons/ep/close'

const value1 = ref(true)
const value2 = ref(true)
</script>

<template>
  <DemoBlock>
    <div class="demo-block__section">
      <span class="demo-block__caption">字符串值</span>
      <strong>切换时直接输出业务值</strong>
      <el-switch
        v-model="value"
        style="
          --el-switch-on-color: var(--el-color-success);
          --el-switch-off-color: var(--el-color-danger);
        "
        active-value="100"
        inactive-value="0"
      />
      <p>当前绑定值：{{ value }}</p>
    </div>
  </DemoBlock>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import DemoBlock from '../components/demo-block.vue'

const value = ref('100')
</script>

<template>
  <DemoBlock>
    <div class="demo-block__stack">
      <div class="demo-block__section">
        <span class="demo-block__caption">只读设置</span>
        <strong>已开启但暂不可修改</strong>
        <el-switch v-model="value1" disabled />
      </div>

      <div class="demo-block__section">
        <span class="demo-block__caption">可编辑设置</span>
        <strong>仍可在当前步骤中修改</strong>
        <el-switch v-model="value2" />
      </div>
    </div>
  </DemoBlock>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import DemoBlock from '../components/demo-block.vue'

const value1 = ref(true)
const value2 = ref(true)
</script>

<template>
  <DemoBlock>
    <div class="demo-block__stack">
      <div class="demo-block__section">
        <span class="demo-block__caption">开启中</span>
        <strong>等待远端保存结果</strong>
        <el-switch v-model="value1" loading />
      </div>

      <div class="demo-block__section">
        <span class="demo-block__caption">关闭中</span>
        <strong>禁用重复操作直到请求完成</strong>
        <el-switch v-model="value2" loading />
      </div>
    </div>
  </DemoBlock>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import DemoBlock from '../components/demo-block.vue'

const value1 = ref(true)
const value2 = ref(false)
</script>

<template>
  <DemoBlock>
    <div class="demo-block__stack">
      <div class="demo-block__section">
        <span class="demo-block__caption">校验通过</span>
        <strong>满足条件后再真正切换</strong>
        <el-switch
          v-model="value1"
          :loading="loading1"
          :before-change="beforeChange1"
        />
      </div>

      <div class="demo-block__section">
        <span class="demo-block__caption">校验失败</span>
        <strong>返回 false 或拒绝 Promise 会阻止切换</strong>
        <el-switch
          v-model="value2"
          :loading="loading2"
          :before-change="beforeChange2"
        />
      </div>
    </div>
  </DemoBlock>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus-mobile'
import DemoBlock from '../components/demo-block.vue'

const value1 = ref(false)
const value2 = ref(false)
const loading1 = ref(false)
const loading2 = ref(false)

const beforeChange1 = (): Promise<boolean> => {
  loading1.value = true
  return new Promise((resolve) => {
    setTimeout(() => {
      loading1.value = false
      ElMessage.success('设置已保存')
      return resolve(true)
    }, 1000)
  })
}

const beforeChange2 = (): Promise<boolean> => {
  loading2.value = true
  return new Promise((_, reject) => {
    setTimeout(() => {
      loading2.value = false
      ElMessage.error('当前条件不允许切换')
      return reject(new Error('Error'))
    }, 1000)
  })
}
</script>

<template>
  <DemoBlock>
    <div class="demo-block__section">
      <span class="demo-block__caption">动作图标</span>
      <strong>根据状态切换操作图标</strong>
      <el-switch
        v-model="value1"
        :active-action-icon="View"
        :inactive-action-icon="Hide"
      />
      <p>圆点内的图标会跟随状态同步变化，适合用来表达可见性或权限。</p>
    </div>
  </DemoBlock>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import DemoBlock from '../components/demo-block.vue'
import Hide from '~icons/ep/hide'
import View from '~icons/ep/view'

const value1 = ref(true)
</script>

<template>
  <DemoBlock>
    <div class="demo-block__section">
      <span class="demo-block__caption">插槽内容</span>
      <strong>在圆点里放入自定义字符</strong>
      <el-switch v-model="value1">
        <template #active-action>
          <span class="custom-action-badge">开</span>
        </template>
        <template #inactive-action>
          <span class="custom-action-badge">关</span>
        </template>
      </el-switch>
      <p>插槽内容建议保持为一个字或一个图标，避免圆点内挤压变形。</p>
    </div>
  </DemoBlock>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import DemoBlock from '../components/demo-block.vue'

const value1 = ref(true)
</script>

<style scoped>
.custom-action-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--el-text-color-primary);
}
</style>