Vue简单开关组件 - vue-simple-switch

Vue简单开关组件 - vue-simple-switch
插件名称 vue-simple-switch
发布时间 2020年10月21日
插件作者 OperKH

安装和下载:

一个Vue.js组件可在您的应用中创建iOS样式的开关和切换按钮。

# NPM
$ npm install vue-simple-switch --save

组件示例:

<template>
<div id="app">
    <vue-simple-switch v-model="isSwitchedOn" />
</div>
</template>

<script>
import VueSimpleSwitch from 'vue-simple-switch'

export default {
  name: 'app',
  components: {
    VueSimpleSwitch
  },
  data () {
    return {
      isSwitchedOn: true
    }
  }
}
</script>

可用props:

Prop 名称类型默认值描述
valueBooleanfalse1-way 数据绑定
colorString#5d9cec 设置开关颜色
disabledBooleanfalse 设为停​​用
readonlyBooleanfalse 设置为只读。
与:value prop结合使用,而不是v-model
requiredBooleanfalse 需要设置

更多示例:

<vue-simple-switch v-model="isSwitchedOn1" />
<vue-simple-switch :value="isSwitchedOn2" />
<vue-simple-switch :value="isSwitchedOn3" readonly />
<vue-simple-switch v-model="isSwitchedOn4" disabled />
<vue-simple-switch v-model="isSwitchedOn5" color="#ff902b" required />