在一個指令中包裝Switchery VueJS

Question

我試圖把Switchery iOS 7包裝在Vue指令中，但是直到現在我還沒有成功！有人幫我？我的代碼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> 

這樣我就可以把它包起來，它的部分工作......現在我需要知道如何更新我的選擇的數據以及如何當用戶觸發更改事件以調用服務器並更新數據庫上的某些信息時，請調用onChange方法！

我真的不知道該如何處理它！

在此先感謝！

Answer 1

其實我放棄了Switchery插件，並且製作了我自己的組件！

有我的解決方案！

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> 

讓我知道你做你們的想法！

Answer 2

快速的方法是：this.vm.onChange()，但這使父級組件不得不使用該名稱的方法並限制該指令的可重用性。

另一種方式是簡單地在組件製造出一款腕錶，也許從methods:到watch:移動onChange功能可按：

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

第三選擇是$發出從指令組件的事件：

// 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"/> 

對於你的情況，我會去用簡單的第二種方法