Switch-check-button NPM

switch-check-button

Install

npm install switch-check-button --save

Usage

<template>
  <div>
    <!-- The Props All -->
    <SwitchButton 
      v-model="checked1" 
      label="Open the Switch" 
      classes="my-class-name"
      type="fill"
      :disabled="false" 
      :showText="true"
      :checkedText="['No', 'Yes']"
      :checkedColors="['#ff4949', '#13ce66']"></SwitchButton>

    <!-- v-modal && change Event -->
    <SwitchButton v-model="checked1" @change="changeHandler"></SwitchButton>

    <!-- value && input Event -->
    <SwitchButton :value="checked2" @input="inpChangeHandler"></SwitchButton>
  </div>
</template>

import SwitchButton from 'switch-check-button'

export default {
  // ...
  components: { SwitchButton },
  data() {
    return {
      checked1: false,
      checked2: false
    }
  },
  methods: {
    changeHandler(val) {
      console.log(val)
    },
    inpChangeHandler() {
      this.checked2 = !this.checked2
    }
  }
  // ...
}

API

key	value	information
value	Boolean or String or Number	Default value is false. When Boolean(value) is true, checked.
name	String	Default value is null.
label	String	Default value is null. If it is not empty, it will show the label.
classes	String	Default value is null. Customer className.
disabled	Boolean	Default value is false. When disabled value is true, it could not be clicked.
checkedText	Array	Default value is 'close', 'open', index=0 is false text, index=1 is true text. When showText prop is true, it will be shown.
showText	Boolean	Default value is false. When it is true, the text will be shown.
checkedColors	Array	Default 'red', 'green'
type	String	Default value is 'fill', and it could be chosen between fill and outline.
@change	Function	Function that could get the checked status.