登录
- input输入框自动填充时,背景颜色自动改变的问题
//改变input自动填充背景颜色
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
-webkit-text-fill-color: #808080;
transition: background-color 1000s ease-out 0.5s;
}
- 使用ant-design-vue 登录时,input输入框自动填充时,背景颜色自动改变的问题
(我这里背景颜色时黑色的,所以文字为白色设定)
input#form_item_passWorld:-webkit-autofill,
input#form_item_userName:-webkit-autofill {
-webkit-text-fill-color: #fff !important;
box-shadow: white !important;
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
background-color: transparent !important;
color: #fff !important;
background-image: none;
transition: background-color 50000s ease-in-out 0s;
}
import { nextTick } from "vue";
const passwordRef = ref();
const passwordType = ref("password");
const showPwd =()=> {
if (passwordType.value === 'password') {
passwordType.value = ''
} else {
passwordType.value = 'password'
}
nextTick(() => {
passwordRef.value.password.focus()
})
}
<el-input
size="large"
v-model="ruleForm.password"
:type="passwordType"
ref="passwordRef"
autocomplete="off"
placeholder="请输入系统密码"
prefix-icon="Key"
>
<template #suffix>
<span class="show-pwd" @click="showPwd">
<el-icon v-if="passwordType==='password'" class="el-input__icon"><Hide /></el-icon>
<el-icon v-else class="el-input__icon"><View /></el-icon>
</span>
</template>
</el-input>