vue添加验证码

src/views/login/index.vue

@@ -59,6 +59,23 @@
         </el-form-item>
       </el-tooltip>
 
+      <el-form-item prop="Verification ">
+        <el-col :span="16">
+          <el-input
+            ref="验证码"
+            v-model="loginForm.Verification "
+            :placeholder="('验证码')"
+            name="Verification "
+            type="text"
+            tabindex="1"
+            autocomplete="on"
+          />
+        </el-col>
+        <el-col :span="8">
+          <img class="verifyCodeImg" :src="imgUrl" @click="resetImg">
+        </el-col>
+      </el-form-item>
+
       <el-button
         :loading="loading"
         type="primary"
@@ -69,13 +86,13 @@
       </el-button>
       <el-button
         :loading="loading"
-        type="primary"
+        type="info"
         style="width: 30%; margin-bottom: 30px; margin-left: 60px"
-        @click.native.prevent="handleLogin"
+        @click="resetLoginForm"
       >
-        {{ $t("login.logIn") }}
+        重置
+        <!-- {{ $t("login.logIn") }} -->
       </el-button>
-      <!-- <el-button type="info" @click="resetLoginForm">重置</el-button> -->
     </el-form>
 
     <el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog">
@@ -278,12 +295,22 @@ $bg: #2d3a4b;
 $dark_gray: #889aa4;
 $light_gray: #eee;
 
+.el-button--info{
+  background: #1890ff;
+}
+
 .login-container {
   min-height: 100%;
   width: 100%;
   background-color: $bg;
   overflow: hidden;
 
+  .verifyCodeImg {
+    margin-top: 5px;
+    margin-left: 10px;
+    height: 30px;
+    width:"60%",
+  }
   .login-form {
     position: relative;
     width: 520px;