Wrapping Switchery in einer Richtlinie VueJS

Question

Ich versuche, die Switchery iOS 7 in eine Vue-Richtlinie zu wickeln, aber ich hatte bis jetzt keinen Erfolg! Jemand, der mir hilft?

Dort ist mein Code fiddle.

JS

Vue.directive('plSwitchery', { 
    twoWay: true, 

    deep: true, 

    params: [], 

    bind: function() { 

    var self = this, 
     value = self.value, 
     el = self.el; 

    el.checked = true; 

    new Switchery(el); 

    $(el).on('change', function(a) { 
     value = !value; 
     self.set(value); 
     alert(self.value); 
    }); 

    }, 
    update: function(value) { 
    window.console.log('directive update'); 
    }, 
    unbind: function() { 
    this.el.destroy(); 
    } 
}); 

var vm = new Vue({ 
    el: '#app', 
    data: { 
    selected: 1, 
    }, 
    methods: { 
    onChange: function() { 
     alert('Do HTTP request'); 
    } 
    } 
}); 

HTML

<div id="app"> 

    <input type="checkbox" v-pl-switchery="selected" /> 

</div> 

So konnte ich es wickeln und es ist teilweise arbeiten ... Jetzt muss ich wissen, wie meine ausgewählten Daten zu aktualisieren und wie Rufen Sie die Methode onChange auf, wenn der Benutzer das Änderungsereignis auslöst, um den Server aufzurufen und einige Informationen in der Datenbank zu aktualisieren!

Ich verstehe nicht wirklich, wie ich damit umgehen soll!

Vielen Dank im Voraus!

Answer 1

Eigentlich Ich gab das Switchery-Plugin auf und ich habe meine eigene Komponente erstellt!

Da ist meine Lösung!

JS

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

var vm = new Vue({ 
    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_switch input[type="checkbox"] { 
    position: absolute; 
    -webkit-appearance: none; 
    appearance: none; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    opacity: 0; 
    cursor: pointer; 
} 
.label_switch input[type="checkbox"] + span { 
    display: inline-block; 
    width: 38px; 
    height: 18px; 
    position: relative; 
} 
.label_switch input[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:hover input[type="checkbox"] + span:before { 
    box-shadow: inset 0 0 15px #eee; 
} 
.label_switch input[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: 2px 1px 1px -2px rgba(0, 0, 0, 0.4) 
} 
.label_switch input[type="checkbox"]:checked + span:after { 
    left: 18px; 
    border: solid 1px #5FBEAA; 
    box-shadow: none; 
} 
.label_switch input[type="checkbox"]:checked + span:before, 
.label_switch input[type="checkbox"]:disabled:checked + span:before { 
    border: 1px solid #5FBEAA; 
    background-color: #5FBEAA; 
} 
.label_switch:hover input[type="checkbox"]:checked + span:before { 
    box-shadow: none; 
} 
.label_switch input[type="checkbox"]:disabled + span { 
    opacity: 0.6; 
} 
.label_switch input[type="checkbox"]:disabled + span:before { 
    background-color: #f7f7f7; 
} 
.label_switch input[type="checkbox"]:disabled + span:after { 
    background-color: #f3f3f3; 
} 
.label_switch input[type="checkbox"]:disabled + span:after { 
    background-color: #fff; 
} 
.label_switch input[type="checkbox"]:disabled + span:before, 
.label_switch input[type="checkbox"]:disabled + span:after { 
    cursor: no-drop; 
} 
.label_switch input[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

<template id="ck"> 
    <label class="label_switch" :class="{ 'disabled' : disabled }"> 
    <input type="checkbox" v-model="model" :false-value="false" :true-value="true" :disabled="disabled" @click="onChange()"> 
    <span :class="{ 'm-r-5': text != '' }"></span> {{ text }} 
    </label> 
</template> 

<div id="add"> 
    <pre>{{ $data | json }}</pre> 
    <pl-switch :model.sync="state" text="Example"></pl-switch> 
</div> 

Lassen Sie mich wissen, dass Sie denken Sie, Jungs!

Answer 2

Der schnelle Weg wäre zu tun: this.vm.onChange(), aber das macht es notwendig für die Elternkomponente, eine Methode mit diesem Namen zu haben, und schränkt die Wiederverwendbarkeit dieser Direktive ein.

Eine andere Möglichkeit wäre, einfach eine Uhr in der Komponente zu erstellen und vielleicht bewegen, um die onChange funciton methods:-watch::

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

dritte Option wäre zu $ ​​ein Ereignis in der Komponente aus der Richtlinie emittieren:

// in the directive 
this.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"/> 

Für Ihre Situation würde ich mit dem einfachen zweiten Ansatz geht