源文件

jeepay-ui-uapp-agent/components/JeepayLogin/LoginTextUp.vue

@@ -0,0 +1,131 @@
+<!--
+  登录页专用文字上移样式，行高，宽度，密码框与通用样式不一致
+  autoComplete="new-password"
+-->
+<template>
+  <div class="jee-input">
+    <div class="jee-text-up">
+      <a-input
+        ref="inputRef"
+        :type="inputPassword"
+        :value="value"
+        :required="isGoogle"
+        :disabled="props.disabled"
+        autoComplete="new-password"
+        @change="onChange($event)"
+      />
+      <label @click="inputRef.focus()">{{ placeholder }}</label>
+    </div>
+    <div v-if="isPassword == 'password'" class="eyes" @click="changeEyes">
+      <!-- 密码框的小眼睛 -->
+      <eye-outlined v-if="!eyes" />
+      <eye-invisible-outlined v-else />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, ref } from 'vue'
+
+// 定义input对象
+const inputRef = ref()
+
+// 定义父组件的传参和类型
+const props = defineProps({
+  value: { type: String, default: null },
+  placeholder: { type: String, default: '' },
+  isPassword: { type: String, default: 'text' }, // 是否为密码框
+  isGoogle: { type: String, default: 'required' }, // 谷歌验证码是否必填
+  disabled: { type: Boolean, default: false } // 是否禁用
+})
+
+// nextTick(() => {
+//   // inputRef.value.focus()
+//   if(!props.value) {
+//       inputRef.value.blur()
+//     }
+//   // watch(() => props.value, () => {
+
+//   // })
+// })
+
+// 密码的显示与隐藏
+let eyes = ref(true)
+let inputPassword = ref(props.isPassword)
+const changeEyes = () => {
+  eyes.value = !eyes.value
+  eyes.value
+    ? (inputPassword.value = 'password')
+    : (inputPassword.value = 'text')
+}
+const emit = defineEmits(['update:value'])
+const onChange = (e) => emit('update:value', e.target.value)
+</script>
+
+<style scoped lang="less">
+.jee-input {
+  position: relative;
+  .eyes {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 99;
+  }
+}
+// 文字上移 效果
+.jee-text-up {
+  position: relative;
+
+  input {
+    outline: 0;
+    transition: all 0.2s ease;
+    height: 40px;
+    max-width: 300px;
+  }
+  input::-webkit-input-placeholder {
+    color: transparent;
+    font-size: 13px;
+  }
+  .placeShow::-webkit-input-placeholder {
+    color: #bfbfbf;
+  }
+  label {
+    margin-left: 6px;
+    position: absolute;
+    left: 0;
+    bottom: 13px;
+    padding: 0px 5px;
+    color: #bfbfbf;
+    font-size: 13px;
+    transition: all 0.2s ease;
+    border-radius: 3px;
+    line-height: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: initial;
+  }
+
+  input:focus + label,
+  input:active + label,
+  input:valid + label {
+    font-weight: normal;
+    font-size: 12px;
+    letter-spacing: 0.05em;
+    text-align: left;
+    color: var(--ant-primary-color);
+    background: #fff; // 更换背景色
+    transform: translateY(-22px);
+  }
+
+  input:not(:focus) + label {
+    color: #b0afb3;
+    background: #fff;
+  }
+}
+</style>