在指令VueJS中封装交换机

Wrapping Switchery in a Directive VueJS

本文关键字：封装 交换机 VueJS 指令      更新时间：2024-05-18

我正试图将Switchery iOS 7封装在Vue指令中，但直到现在我都没有成功！有人帮我吗？

这是我的代码小提琴。

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方法！

我真的不知道该怎么处理！

提前感谢！

快速的方法是：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"/>

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

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

让我知道你们的想法！

相关文章：