<template>
  <div id="app">
    <div>
      <web-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"></web-switch>
    </div>
    <div>
      <web-switch v-model="value1" active-text="按月付费" inactive-text="按年付费"></web-switch>
    </div>
    <div>
      <web-switch v-model="value2" active-color="#13ce66" inactive-color="#ff4949" active-text="按月付费" inactive-text="按年付费"></web-switch>
    </div>
    <div>
      <web-switch v-model="value3" active-color="#13ce66" inactive-color="#ff4949" active-text="按月付费" inactive-text="按年付费" disabled :eldisabled="true"></web-switch>
    </div>
    <div>
      <web-radio v-model="radio" label="1">备选项1</web-radio>
      <web-radio  v-model="radio" label="2">备选项2</web-radio>
    </div>
  </div>
</template>

<script>
    import WebSwitch from '../packages/web-switch/src/web-switch.vue'
    import WebRadio from '../packages/web-radio/src/web-radio.vue'
    export default {
      data(){
        return{
          value: true,
          value1: true,
          value2: false,
          value3: false,
          radio: "1"

        }
      },
      components: {WebSwitch,WebRadio}
    }
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
