关于登录的那些事（vue3+element plus）

• input输入框自动填充时，背景颜色自动改变的问题

 //改变input自动填充背景颜色
  input:-internal-autofill-previewed,
  input:-internal-autofill-selected {
    -webkit-text-fill-color: #808080;
    transition: background-color 1000s ease-out 0.5s;
  }
1
2
3
4
5
6

• 使用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;
}
1
2
3
4
5
6
7
8
9
10

• 点击小眼睛，实现input密码框内容显示与隐藏

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()
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13

 <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16