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. |