d

iview-admin/src/components/phone-form/index.js

+import LoginForm from './phone-form.vue'
+export default LoginForm

iview-admin/src/components/phone-form/phone-form.vue

+<template>
+  <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
+    <FormItem prop="mobile">
+      <Input v-model="form.mobile" placeholder="请输入手机号">
+        <span slot="prepend">
+          <Icon :size="16" type="ios-person"></Icon>
+        </span>
+      </Input>
+    </FormItem>
+    <FormItem prop="vcode">
+      <Input  v-model="form.vcode" placeholder="请输入收到的验证码">
+        <span slot="prepend">
+          <Icon :size="14" type="md-lock"></Icon>
+        </span>
+        <span slot="append">
+          <Button type="primary">发送验证码</Button>
+        </span>
+      </Input>
+    </FormItem>
+    <FormItem>
+      <Button @click="handleSubmit" type="primary" long>登录</Button>
+    </FormItem>
+  </Form>
+</template>
+<script>
+export default {
+  name: 'PhoneForm',
+  props: {
+    mobileRules: {
+      type: Array,
+      default: () => {
+        return [
+          { required: true, message: '电话号码不能为空', trigger: 'blur' }
+        ]
+      }
+    },
+    vcodeRules: {
+      type: Array,
+      default: () => {
+        return [
+          { required: true, message: '验证码不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  data () {
+    return {
+      form: {
+        mobile: '',
+        vcode: ''
+      }
+    }
+  },
+  computed: {
+    rules () {
+      return {
+        userName: this.mobileRules,
+        password: this.vcodeRules
+      }
+    }
+  },
+  methods: {
+    handleSubmit () {
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          this.$emit('on-success-valid', {
+            userName: this.form.mobile,
+            password: this.form.vcode
+          })
+        }
+      })
+    }
+  }
+}
+</script>

iview-admin/src/view/login/login.vue

@@ -6,8 +6,15 @@
   <div class="login">
     <div class="login-con">
       <Card icon="log-in" title="欢迎登录" :bordered="false" style="border-radius:0px">
+           <p slot="title" @click.prevent="ispasslogin=true">
+            <a href="#" >密码登录</a>
+        </p>
+        <p   slot="extra" @click.prevent="ispasslogin=false">
+            <a href="#"> 验证码登录</a>
+        </p>
         <div class="form-con">
-          <login-form @on-success-valid="handleSubmit"></login-form>
+          <login-form    v-if="ispasslogin" @on-success-valid="handleSubmit"></login-form>
+          <MobileForm v-if="!ispasslogin" @on-success-valid="handleSubmit"></MobileForm>
           <p class="login-tip">注册</p>
         </div>
       </Card>
@@ -17,10 +24,17 @@
 
 <script>
 import LoginForm from '_c/login-form'
+import MobileForm from '_c/phone-form'
 import { mapActions } from 'vuex'
 export default {
+  data(){
+    return{
+      ispasslogin:true
+    }
+  },
   components: {
-    LoginForm
+    LoginForm,
+    MobileForm
   },
   methods: {
     ...mapActions([