4dkankan-components/docs/examples/switch/text-description.vue

<template>
    <el-switch v-model="value1" class="mb-2" active-text="Pay by month" inactive-text="Pay by year" />
    <br />
    <el-switch v-model="value2" class="mb-2" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="Pay by month" inactive-text="Pay by year" />
    <br />
    <el-switch v-model="value3" inline-prompt active-text="是" inactive-text="否" />
    <el-switch v-model="value4" class="ml-2" inline-prompt style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="Y" inactive-text="N" />
</template>

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

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