1. 基本用法:
<Switch v-model="switchValue" />
在上述例子中,v-model 用于绑定开关的值,switchValue 是在 data 中定义的变量。
2. 禁用状态:
<Switch v-model="switchValue" disabled />
添加 disabled 属性可以禁用开关。
3. 自定义打开和关闭文本:
<Switch v-model="switchValue" active-text="启用" inactive-text="禁用" />
使用 active-text 和 inactive-text 属性可以自定义开关的打开和关闭文本。
4. 自定义打开和关闭颜色:
<Switch v-model="switchValue" active-color="#13ce66" inactive-color="#ff4949" />
使用 active-color 和 inactive-color 属性可以自定义开关的打开和关闭颜色。
5. 自定义打开和关闭图标:
<Switch v-model="switchValue" active-icon="el-icon-check" inactive-icon="el-icon-close" />
使用 active-icon 和 inactive-icon 属性可以自定义开关的打开和关闭图标。
6. 加载中状态:
<Switch v-model="switchValue" loading />
添加 loading 属性可以显示加载中的状态。
7. 自定义加载图标:
<Switch v-model="switchValue" loading loading-icon="el-icon-loading" />
使用 loading-icon 属性可以自定义加载中状态下的图标。
以上是一些常见的 Element-React Switch 组件的用法示例。你可以根据具体需求在项目中使用它们,并根据 Element-React 文档进行详细配置和使用说明。
转载请注明出处:http://www.pingtaimeng.com/article/detail/5604/Element-React