VUE+Element UI 实现登录密码的显示和隐藏+背景图片

template部分代码

	<div>
      <el-form ref="loginInfo" :model="loginInfo" :rules="loginRule" label-width="80px" style="margin-left: 40%;margin-right: 40%;margin-top: 10%" >
        <el-form-item label="账号" prop="username">
          <el-input v-model="loginInfo.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" >
          <el-input :type="passwordVisible" v-model="loginInfo.password">
            <i slot="suffix" :class="icon" @click="showPass"></i>
          </el-input>
        </el-form-item>
        <el-form-item >
          <el-button @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>

data部分代码

 data() {
     
          return {
     
            passwordVisible:'password',
            icon:"el-icon-view",
            loginInfo:{
     
              username:'',
              password:''
            },
            loginRule: {
     
              username: [
                {
     required: true, message: '请输入账号', trigger: 'change'}
              ],
              password: [
                {
     required: true, message: '请输入密码', trigger: 'change'}
              ]
            }
          }
      },

method部分代码

methods:{
     
       showPass() {
     
         if( this.passwordVisible==="text"){
     
           this.passwordVisible="password";
           //更换图标
           this.icon="el-icon-view";
         }else {
     
           this.passwordVisible="text";
           this.icon="el-icon-lock";
         }
       },

最后实现


背景图片成果图

实现：最外层div绑定class
style样式代码

<style scoped>
  .login{
     
    background:url("../../assets/back.jpg");
    width: 100%;
    height: 100%;
    position:fixed;
    margin-top: -10px;
    margin-left: -10px;
    background-size:100% 100%;
  }

</style>