Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including vue-multi-toggle-switch with all npm packages installed. Try it out:

var vueMultiToggleSwitch = require("vue-multi-toggle-switch")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-multi-toggle-switch v1.0.9

toggle-switch component of Vue.js

vue-multi-toggle-switch version vue

Toggle switch for vue.js

Do you have questions or want a new feature? Use the "Issues" section :point_left:

Setup

install:

npm install vue-multi-toggle-switch --save

Import: (in your main.js)

    import ToggleSwitch from "vue-multi-toggle-switch";
    import Vue from "vue";
    Vue.use(ToggleSwitch);

Usage

Use: (in your local .vue file/component, html section)


<toggle-switch 
  :resultData="resultData" //toggle switch button data
  :curStyle="curStyle" //toggle switch button css style
  @changeSwitch="change" //toggle switch button events
>
</toggle-switch>

Webpack project by vue-cli

https://github.com/woollay/vue-toggle-switch

Properties

NameTypeRequiredSampleDescription
resultDataJSONYes[{id: "234",status: false,on: "ON",off: "OFF"}]id:id of toggle-switch;
on/off status of toggle-switch;
on:the text of on status in toggle-switch;
off:the text of off status in toggle-switch
curStyleJSONNo{ switch_on: "red" }customization style of toggle-switch

Events

NameDescription
changeSwitchTriggered on toggle, user selects switch option, returns current value. used in component,like:
@changeSwitch="change",
the callback function as following:
function change(result) {
console.log("option changed:" + result.id + "," + result.checked);
}

LICENSE

MIT

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free