Vue Directive

by WILLIAM CORREA

HTML

<div id="app">
  <ul class="my-list">
    <li v-selectable> A </li>
    <li v-selectable> B </li>
    <li v-selectable> C </li>
  </ul>
</div>

CSS

ul {
  margin: 0;
  padding: 0;
}

li {
  cursor: pointer;
  list-style: none;
  transition: background .3s;
  padding: 5px 10px;
  border: 1px solid transparent;
}

.my-list .--selected {
  border: 1px solid #b7b7b7;
  color: #505050;
  background: #dddddd;
}

JavaScript

/*export */const selectable = (el) => {
  el.selected = false;
  el.addEventListener('click', () => {
    el.selected = !el.selected;
    el.className = el.selected ? '--selected' : '';
  })
}

// import { selectable } from 'src/modules/Common/Directives'

new Vue({
  el: '#app',
  directives: {
    selectable: selectable
  },
  methods: {
    alert(...parameters) {
      alert(parameters)
    }
  }
});