在指令 VueJS 中包装 Switchery

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>

所以我可以包装它，它可以部分工作......现在我需要知道如何更新我的 SELECTED 数据以及如何在用户触发更改事件以调用服务器并更新一些信息时调用 onChange 方法数据库！

我真的不知道如何处理它！

提前致谢！

Answer 1

快速的方法是：this.vm.onChange()，但这使得父组件有必要使用该名称的方法，并限制了该指令的可重用性。

另一种方法是简单地在组件中创建一个手表，并可能将onChange 函数从methods: 移动到watch:：

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

第三种选择是从指令中 $emit 组件中的事件：

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

对于您的情况，我会采用简单的第二种方法

Answer 2

其实我放弃了 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>

让我知道你们的想法！