fix(MdInput): 修复样式以及输入错误

Author: Tenny

src/components/input/MdInput.vue

@@ -25,7 +25,7 @@
 </template>
 <script setup lang="ts">
 import { ref, watch } from 'vue';
-import { random } from 'ph-utils';
+import { random, isBlank } from 'ph-utils';
 
 const el = ref<HTMLInputElement>();
 
@@ -69,9 +69,7 @@ function handleInputBlur() {
 }
 
 watch(modelValue, (v) => {
-  if (v != null) {
-    hasValue.value = true;
-  }
+  hasValue.value = isBlank(v) ? false : true;
 });
 
 defineExpose({

style/md-input/index.css

@@ -9,6 +9,8 @@
 .nt-md-input__inner {
   width: 100%;
   height: 100%;
+  border: 0;
+  background: transparent;
   border-style: solid;
   border-color: #c0c0c0;
   border-bottom-width: 1px;
@@ -38,7 +40,6 @@
 .nt-md-input.nt-focused .nt-md-input__label {
   transform: translateY(-150%);
   font-size: 12px;
-  background-color: #fff;
 }
 .nt-md-input.nt-focused .nt-md-input__label {
   color: var(--nt-primary-color, #52c41a);
@@ -60,4 +61,5 @@
 .nt-md-input-outline.nt-has-value .nt-md-input__label {
   padding-left: 4px;
   padding-right: 4px;
+  background-color: #ffffff;
 }