vue3 + ElementUI plus中switch开关 inline-prompt 失效

在Vue 3和Element Plus中，如果你遇到<el-switch>组件的inline-prompt属性失效的问题，很可能是因为Element Plus的版本不支持这个属性，或者你没有正确使用它。

Element Plus的<el-switch>组件在Vue 3中并没有直接的inline-prompt属性。如果你需要一个开关带有文本提示，你可以自定义样式来实现这个效果。

以下是一个简单的自定义开关组件的例子，它使用了<el-switch>和一些额外的标签来显示提示文本：

<template>
  <div class="inline-switch">
    <el-switch
      v-model="switchValue"
      active-color="#13ce66"
      inactive-color="#ff4949"
      active-text="开"
      inactive-text="关">
    </el-switch>
    <span>{{ switchValue ? '开启提示' : '关闭提示' }}</span>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElSwitch } from 'element-plus';
 
const switchValue = ref(false);
</script>
 
<style>
.inline-switch {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
 
.inline-switch > span {
  margin-left: 10px;
}
</style>

在这个例子中，我们使用了Element Plus的<el-switch>组件，并通过active-text和inactive-text属性来设置切换到不同状态时的文本。然后通过一个<span>标签来显示当前开关状态的文本提示，并通过CSS来实现提示文本与开关的内联显示。

请确保你使用的Element Plus版本支持你尝试使用的属性，如果不支持，你可能需要更新Element Plus到最新版本或者查找相应的替代属性或自定义解决方案。