Wrapping Switchery In A Directive Vuejs

I am trying to wrap the Switchery iOS 7 in a Vue Directive but I had no success until now! Somebody to help me? There is my code fiddle. JS Vue.directive('plSwitchery', { twoWay:

Solution 1:

The quick way would be to do: this.vm.onChange(), but that makes it nessessary for the parent component to have a method by that name, and restricts the reusability of that directive.

Another way would be to simply create a watch in the component and maybe move the onChange funciton from methods: to watch::

watch: {
  'selected': function() {
    alert('Do HTTP request');
  }
}

Third option would be to $emit an event in the component from the directive:

// in the directivethis.vm.$emit('swicth-changed',value)

//if you have different switches you can name them with the directive argument:// v-pl-switchery:name="selected" this.vm.$emit('switch-changed',this.arg,value) // this.arg gives you the 'name'

<input type="checkbox" v-pl-switchery="selected"@switch-changed="onChange"/>

For your situation I would go with the simple second approach

Solution 2:

Actually I gave up Switchery plugin and I've made my own component!

There is my solution!

JS

Vue.component('plSwitch', {
  template: '#ck',
  props: {
    model: {
      default () {
        returnfalse
      }
    },
    text: {
      default () {
        return;
      }
    },
    disabled: {
      default () {
        returnfalse
      }
    }
  },
  methods: {
    onChange() {
      console.log('oi')
      vm.$dispatch('onChange')
    }
  }
})

var vm = newVue({
  el: '#add',
  data: {
    state: true
  },
  events: {
    onChange: function() {
      alert('Do HTTP request');
    }
  }
})

CSS

.label_switch {
  display: inline-block;
  margin: 0;
  cursor: pointer;
  font-weight: normal;
  position: relative;
}
.label_switchinput[type="checkbox"] {
  position: absolute;
  -webkit-appearance: none;
  appearance: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.label_switchinput[type="checkbox"] + span {
  display: inline-block;
  width: 38px;
  height: 18px;
  position: relative;
}
.label_switchinput[type="checkbox"] + span:before {
  content: "";
  display: block;
  width: 38px;
  height: 22px;
  border-radius: 20px;
  border: 1px solid #dfdfdf;
  -webkit-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
.label_switch:hoverinput[type="checkbox"] + span:before {
  box-shadow: inset 0015px#eee;
}
.label_switchinput[type="checkbox"] + span:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  display: block;
  width: 22px;
  height: 22px;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  background: #fff;
  border-radius: 20px;
  border: solid 1px#dfdfdf;
  box-shadow: 2px1px1px -2pxrgba(0, 0, 0, 0.4)
}
.label_switchinput[type="checkbox"]:checked + span:after {
  left: 18px;
  border: solid 1px#5FBEAA;
  box-shadow: none;
}
.label_switchinput[type="checkbox"]:checked + span:before,
.label_switchinput[type="checkbox"]:disabled:checked + span:before {
  border: 1px solid #5FBEAA;
  background-color: #5FBEAA;
}
.label_switch:hoverinput[type="checkbox"]:checked + span:before {
  box-shadow: none;
}
.label_switchinput[type="checkbox"]:disabled + span {
  opacity: 0.6;
}
.label_switchinput[type="checkbox"]:disabled + span:before {
  background-color: #f7f7f7;
}
.label_switchinput[type="checkbox"]:disabled + span:after {
  background-color: #f3f3f3;
}
.label_switchinput[type="checkbox"]:disabled + span:after {
  background-color: #fff;
}
.label_switchinput[type="checkbox"]:disabled + span:before,
.label_switchinput[type="checkbox"]:disabled + span:after {
  cursor: no-drop;
}
.label_switchinput[type="checkbox"]:disabled:checked + span:before {} .m-r-5 {
  margin-right: 5px!important;
}
.m-l-5 {
  margin-left: 5px!important;
}
.disabled {
  cursor: no-drop!important;
}

HTML

<templateid="ck"><labelclass="label_switch":class="{ 'disabled' : disabled }"><inputtype="checkbox"v-model="model":false-value="false":true-value="true":disabled="disabled" @click="onChange()"><span:class="{ 'm-r-5': text != '' }"></span> {{ text }}
  </label></template><divid="add"><pre>{{ $data | json }}</pre><pl-switch:model.sync="state"text="Example"></pl-switch></div>

Let me know you do you guys think!