vue elementui el-switch按钮内显示文字
在Vue中使用Element UI的el-switch
组件时,如果你想在切换按钮内显示文字,可以通过插槽(slot)来实现。el-switch
组件提供了open
和close
两个名为slot
的插槽,分别用于显示开启和关闭状态下的内容。
以下是一个简单的例子,展示如何在el-switch
按钮内显示文字:
<template>
<el-switch
v-model="switchValue"
active-text="开启"
inactive-text="关闭">
</el-switch>
</template>
<script>
export default {
data() {
return {
switchValue: false
};
}
};
</script>
在这个例子中,el-switch
组件的v-model
绑定了变量switchValue
,用于控制开关状态。active-text
和inactive-text
属性分别用于设置开启和关闭状态下要显示的文字。当switchValue
为true
时,open
插槽会显示"开启",为false
时close
插槽会显示"关闭"。
评论已关闭