fix(MdFile): disabled icon (#1787)

fix #1782
vuematerial · Jun 7, 2018 · 21d7e67 · 21d7e67
1 parent c3f6eb0
commit 21d7e67
Showing 1 changed file with 16 additions and 3 deletions.
diff --git a/src/components/MdField/MdFile/MdFile.vue b/src/components/MdField/MdFile/MdFile.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="md-file">
-    <md-file-icon @click.native="openPicker" />
+    <md-file-icon class="md-file-icon" :class="iconClass" @click.native="openPicker" />
 
     <input
       class="md-input"
@@ -31,6 +31,13 @@
       },
       name: String
     },
+    computed: {
+      iconClass () {
+        return {
+          'md-disabled': this.disabled
+        }
+      }
+    },
     mixins: [MdFieldMixin],
     inject: ['MdField'],
     methods: {
@@ -95,8 +102,14 @@
       border: 0;
     }
 
-    .md-icon {
-      cursor: pointer;
+    .md-file-icon {
+      &:not(.md-disabled) {
+        cursor: pointer;
+      }
+
+      &.md-disabled {
+        pointer-events: none;
+      }
     }
   }
 </style>