style(components): canonical code

src/components/ReInfo/index.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="info">
+    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="rule-form">
+      <el-form-item prop="userName">
+        <el-input
+          clearable
+          v-model="ruleForm.userName"
+          placeholder="请输入用户名"
+          prefix-icon="el-icon-user"
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="passWord">
+        <el-input
+          clearable
+          type="password"
+          show-password
+          v-model="ruleForm.passWord"
+          placeholder="请输入密码"
+          prefix-icon="el-icon-lock"
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="verify">
+        <el-input
+          maxlength="2"
+          onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
+          v-model.number="ruleForm.verify"
+          placeholder="请输入验证码"
+        ></el-input>
+        <span class="verify" title="刷新" v-html="ruleForm.svg" @click.prevent="refreshVerify"></span>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click.prevent="onBehavior">{{ tipsFalse }}</el-button>
+        <el-button @click="resetForm">重置</el-button>
+        <span class="tips" @click="changPage">{{ tips }}</span>
+      </el-form-item>
+      <span title="测试用户 直接登录" class="secret" @click="noSecret">免密登录</span>
+    </el-form>
+  </div>
+</template>
+
+<script lang='ts'>
+import {
+  ref,
+  defineComponent,
+  PropType,
+  onBeforeMount,
+  getCurrentInstance,
+  watch,
+  nextTick
+} from "vue";
+import { storageSession } from "/@/utils/storage";
+
+export interface ContextProps {
+  userName: string;
+  passWord: string;
+  verify: number | null;
+  svg: any;
+  telephone?: number;
+  dynamicText?: string;
+}
+
+import { useRouter, useRoute, Router } from "vue-router";
+
+import { initRouter } from "/@/router";
+
+export default defineComponent({
+  name: "Info",
+  props: {
+    ruleForm: {
+      type: Object as PropType<ContextProps>,
+      require: true
+    }
+  },
+  emits: ["onBehavior", "refreshVerify"],
+  setup(props, ctx) {
+    let vm: any;
+
+    let tips = ref("注册");
+    let tipsFalse = ref("登录");
+
+    const route = useRoute();
+    const router = useRouter();
+
+    watch(
+      route,
+      async ({ path }, prevRoute: unknown): Promise<void> => {
+        await nextTick();
+        path.includes("register")
+          ? (tips.value = "登录") && (tipsFalse.value = "注册")
+          : (tips.value = "注册") && (tipsFalse.value = "登录");
+      },
+      { immediate: true }
+    );
+
+    const rules: Object = ref({
+      userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+      passWord: [
+        { required: true, message: "请输入密码", trigger: "blur" },
+        { min: 6, message: "密码长度必须不小于6位", trigger: "blur" }
+      ],
+      verify: [
+        { required: true, message: "请输入验证码", trigger: "blur" },
+        { type: "number", message: "验证码必须是数字类型", trigger: "blur" }
+      ]
+    });
+
+    // 点击登录或注册
+    const onBehavior = (evt: Object): void => {
+      vm.refs.ruleForm.validate((valid: Boolean) => {
+        if (valid) {
+          ctx.emit("onBehavior", evt);
+        } else {
+          return false;
+        }
+      });
+    };
+
+    // 刷新验证码
+    const refreshVerify = (): void => {
+      ctx.emit("refreshVerify");
+    };
+
+    // 表单重置
+    const resetForm = (): void => {
+      vm.refs.ruleForm.resetFields();
+    };
+
+    // 登录、注册页面切换
+    const changPage = (): void => {
+      tips.value === "注册" ? router.push("/register") : router.push("/login");
+    };
+
+    const noSecret = (): void => {
+      storageSession.setItem("info", {
+        username: "admin",
+        accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
+      });
+      initRouter("admin").then((router: Router) => {});
+      router.push("/");
+    };
+
+    onBeforeMount(() => {
+      vm = getCurrentInstance(); //获取组件实例
+    });
+
+    return {
+      rules,
+      tips,
+      tipsFalse,
+      resetForm,
+      onBehavior,
+      refreshVerify,
+      changPage,
+      noSecret
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.info {
+  width: 30vw;
+  height: 48vh;
+  background: url("../../assets/login.png") no-repeat center;
+  background-size: cover;
+  position: absolute;
+  border-radius: 20px;
+  right: 100px;
+  top: 30vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  @media screen and (max-width: 750px) {
+    width: 88vw;
+    right: 25px;
+    top: 22vh;
+  }
+  .rule-form {
+    width: 80%;
+    .verify {
+      position: absolute;
+      margin: -10px 0 0 -120px;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+    .tips {
+      color: #409eff;
+      float: right;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+  .secret {
+    color: #409eff;
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>