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数据以及当用户触发change事件来调用服务器并更新时如何调用onChange方法关于数据库的一些信息！

我真的没办法处理它！

提前致谢！

Answer 1

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

另一种方法是在组件中创建一个手表，并将onChange功能从methods:移到watch:：

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

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

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>

让我知道你们有没有想过！

在指令VueJS中包装Switchery

2 个答案: