feat: индикация клика по чекбоксу колонки

popstas · Dec 8, 2018 · 103f1b7 · 103f1b7
1 parent 6cc0b4e
commit 103f1b7
Showing 1 changed file with 15 additions and 3 deletions.
diff --git a/components/ColumnField.vue b/components/ColumnField.vue
@@ -1,15 +1,27 @@
 <template>
-  <div class="available-fields__field"
+  <div class="available-fields__field" ref="component"
     :title="field.name + (field.comment ? ` \n${field.comment}` : '') + (field.command ? ` \n${field.command}` : '')"
-    @click="$emit('click', field)"
+    @click="click"
   >
     <input type="checkbox" :checked="checked">
     <label>{{ field.comment || field.title }}</label>
   </div>
 </template>
 
+<style lang="scss">
+.available-fields__field{
+  &.clicked { background: #ffffaa;}
+}
+</style>
+
 <script>
 export default {
-  props: ['field', 'checked']
+  props: ['field', 'checked'],
+  methods: {
+    click() {
+      this.$refs.component.classList.add('clicked');
+      this.$emit('click', this.field);
+    }
+  }
 }
 </script>