132 lines
2.9 KiB
Vue
132 lines
2.9 KiB
Vue
<!--
|
||
登录页专用文字上移样式，行高，宽度，密码框与通用样式不一致
|
||
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>
|