Vue.js翘板开关组件 - vue-rocker-switch

Vue.js翘板开关组件 - vue-rocker-switch
插件名称 vue-rocker-switch
发布时间 2020年5月26日
插件作者 DannyFeliz

Vue.js的可定制翘板开关组件。

安装和下载:

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

使用

<template>
  <RockerSwitch />
</template>

<script>
// 导入package
import RockerSwitch from "vue-rocker-switch";
// 导入样式
import "vue-rocker-switch/dist/vue-rocker-switch.css";

export default {
  name: "App",
  components: {
    RockerSwitch
  }
};
</script>

Props

Prop 描述 默认值 类型
value 附加到翘板开关的布尔值。这也将用于初始化组件值。 false Boolean
size 摇臂开关的大小,它可以是一个字符串(smallmediumlarge)或十进制数 small String or Number
labelOn On标签文字 On String or Number
labelOff Off 标签文字 Off String or Number
activeColorLabel  On 标签处于活动状态时使用的文本颜色 #fff #fff String
inactiveColorLabel  Off 标签无效时使用的文字颜色 #333 #333 String
backgroundColorOn On 按钮的背景色 #0084d0 #0084d0 String
backgroundColorOff  Off 按钮的背景色 #bd5757 #bd5757 String
borderColor 翘板开关的边框颜色 #eee #eee String
toggle 允许翘板开关充当拨动开关 true Boolean

事件

事件 描述
change 每次翘板开关改变时触发。