Login 登录组件

普通用户登录

{}

用户名:

密码:

---

图片验证码登录

用户名:

密码:

验证码:

---

手机号登录

手机号:

验证码:

---

改变字段

用户名:

密码:

验证码:

---

调整边距

手机号:

验证码:

<template>
  <h2>普通用户登录</h2>
  {{form}}
  <avue-login v-model="form"
              :option="option"
              @submit="submit">
  </avue-login>
  <hr />
  <h2>图片验证码登录</h2>
  <avue-login :option="option1"
              @refresh="refresh"
              :codesrc="codesrc"
              @submit="submit">
  </avue-login>
  <hr />
  <h2>手机号登录</h2>
  <avue-login :option="option2"
              @submit="submit"
              @send="send"
              v-model="form">
  </avue-login>
  <hr />
  <h2>改变字段</h2>
  <avue-login :option="option4"
              @submit="submit"
              @send="send">
  </avue-login>
  <hr />
  <h2>调整边距</h2>
  <avue-login :option="option3"
              @submit="submit"
              @send="send">
  </avue-login>
</template>
<script>
export default {
  data () {
    return {
      codesrc: '',
      form: {},
      option: {
        width: 400,
        time: 60,
        codeType: 'phone', //phone为手机验证码/img为图片验证码
        column: {
          username: {
            // hide: true,
            label: '用户名',
            // prop: 'user',
            // placeholder:'',
            autocomplete: 'off',
            rules: { required: true, message: '请输入用户名', trigger: 'blur' }
          },
          password: {
            label: '密码',
            // prop: 'pass',
            // placeholder:'',
            autocomplete: 'off',
            rules: { required: true, message: '请输入密码', trigger: 'blur' }
          },
          code: {
            hide: true
          }
        }
      },
      option1: {
        width: 400,
        codeType: 'img',
        column: {
          username: {
            label: '用户名',
            placeholder: '手机号/邮箱/用户名',
            autocomplete: 'off',
            rules: { required: true, message: '请输入用户名', trigger: 'blur' }
          },
          password: {
            label: '密码',
            autocomplete: 'off',
            rules: { required: true, message: '请输入密码', trigger: 'blur' }
          },
          code: {
            label: '验证码',
            tip: '点击图片可以刷新验证码',
            autocomplete: 'off',
            rules: { required: true, message: '请输验证码', trigger: 'blur' }
          }
        }
      },
      option2: {
        width: 400,
        time: 60,
        codeType: 'phone',
        column: {
          username: {
            label: '手机号',
            prefixIcon: 'el-icon-mobile-phone',
            placeholder: '手机号/邮箱/用户名',
            autocomplete: 'off',
            rules: { required: true, message: '请输入手机号', trigger: 'blur' }
          },
          password: {
            hide: true,
          },
          code: {
            label: '验证码',
            autocomplete: 'off',
            rules: { required: true, message: '请输验证码', trigger: 'blur' }
          }
        }
      },
      option3: {
        width: 400,
        time: 60,
        labelWidth: 120,
        codeType: 'phone',
        column: {
          username: {
            label: '手机号',
            prefixIcon: 'el-icon-mobile-phone',
            placeholder: '手机号/邮箱/用户名',
            autocomplete: 'off',
            rules: { required: true, message: '请输入手机号', trigger: 'blur' }
          },
          password: {
            hide: true,
          },
          code: {
            label: '验证码',
            autocomplete: 'off',
            rules: { required: true, message: '请输验证码', trigger: 'blur' }
          }
        }
      },
      option4: {
        width: 400,
        column: {
          username: {
            label: '用户名',
            tip: '改变字段为user',
            prop: 'user',
          },
          password: {
            label: '密码',
            tip: '改变字段为pass',
            prop: 'pass',
          },
          code: {
            label: '验证码',
            tip: '改变字段为vaild',
            prop: 'vaild',
          }
        }
      }
    }
  },
  mounted () {
    this.refresh();
  },
  methods: {
    refresh () {
      this.$message.success('图片验证码刷新成功')
      this.codesrc = "https://pigx.pig4cloud.com/code?randomStr=" + new Date().getTime();
    },
    send (done) {
      this.$message.success(this.form.username + '验证码发送成功')
      done();
    },
    submit (form) {
      this.$message.success(JSON.stringify(form))
      console.log(form);
    }
  }
}
</script>

显示代码复制代码复制代码