fix: 优化 switch 组件鼠标显示效果

Cyberpaiger · Feb 18, 2020 · e9b5bce · e9b5bce
1 parent f2bedfd
commit e9b5bce
Showing 1 changed file with 23 additions and 9 deletions.
diff --git a/src/core/view/components/switch/index.vue b/src/core/view/components/switch/index.vue
@@ -1,16 +1,17 @@
 <template>
-  <uni-switch
-    v-on="$listeners"
+  <uni-switch
+    :disabled="disabled"
+    v-on="$listeners"
     @click="_onClick">
     <div class="uni-switch-wrapper">
-      <div
-        v-show="type === 'switch'"
-        :class="[switchChecked ? 'uni-switch-input-checked' : '']"
+      <div
+        v-show="type === 'switch'"
+        :class="[switchChecked ? 'uni-switch-input-checked' : '']"
         :style="{backgroundColor: switchChecked ? color : '#DFDFDF',borderColor:switchChecked ? color : '#DFDFDF'}"
         class="uni-switch-input" />
-      <div
-        v-show="type === 'checkbox'"
-        :class="[switchChecked ? 'uni-checkbox-input-checked' : '']"
+      <div
+        v-show="type === 'checkbox'"
+        :class="[switchChecked ? 'uni-checkbox-input-checked' : '']"
         :style="{color: color}"
         class="uni-checkbox-input" />
     </div>
@@ -105,12 +106,17 @@ export default {
 	uni-switch {
 		-webkit-tap-highlight-color: transparent;
 		display: inline-block;
+		cursor: pointer;
 	}
 
 	uni-switch[hidden] {
 		display: none;
 	}
 
+	uni-switch[disabled] {
+		cursor: not-allowed;
+	}
+
 	uni-switch .uni-switch-wrapper {
 		display: -webkit-inline-flex;
 		display: inline-flex;
@@ -134,6 +140,10 @@ export default {
 		transition: background-color 0.1s, border 0.1s;
 	}
 
+	uni-switch[disabled] .uni-switch-input {
+		opacity: .7;
+	}
+
 	uni-switch .uni-switch-input:before {
 		content: " ";
 		position: absolute;
@@ -192,6 +202,10 @@ export default {
 		color: #007aff;
 	}
 
+	uni-switch:not([disabled]) .uni-checkbox-input:hover {
+		border-color: #007aff;
+	}
+
 	uni-switch .uni-checkbox-input.uni-checkbox-input-checked:before {
 		font: normal normal normal 14px/1 "uni";
 		content: "\EA08";
@@ -211,4 +225,4 @@ export default {
 	uni-switch .uni-checkbox-input.uni-checkbox-input-disabled:before {
 		color: #ADADAD;
 	}
-</style>
+</style>