VIP20/13_Vue/day-4/code/vue-login/src/components/MyLogin.vue

<template>
  <div class="login">
    <div class="login-header">
      <span :class="{ active: isQr }" @click="isQr = true">扫码登录</span>
      <span></span>
      <span :class="{ active: !isQr }" @click="isQr = false">账户登录</span>
    </div>
    <div class="login-body">
      <!-- 使用条件渲染 是可以的。但实际上还有更好的实现：利用动态组件 -->
      <!-- <SmLogin v-if="isQr" />
      <AcLogin v-else /> -->
      <!-- 在Vue中内置一个名为 'component' 组件，该组件就是动态组件。component组件在渲染时 有绑定is属性决定 -->
      <!-- 实现时 根据数据属性isQr 生成一个新的数据 （组件名）loginName -->
      <!-- 如果isQr = true，loginName='SmLogin' -->
      <!-- 如果isQr = false，loginName='AcLogin' -->
      <!-- <component :is="loginName" /> -->
      <!-- 那么 动态组件 比 条件渲染 有什么优势呢？ -->
      <!-- 动态组件 可以 配合 内置组件<keep-alive> 实现缓存 -->
      <keep-alive :include="['SmLogin', 'AcLogin']" exclude="" max="10">
        <component :is="loginName" />
      </keep-alive>
    </div>
  </div>
</template>

<script>
import SmLogin from './SmLogin.vue';
import AcLogin from './AcLogin.vue';

export default {
  name: 'MyLogin',
  data() {
    return {
      isQr: true, // 如果是扫码登录 isQr就是 true 否则为false
    };
  },
  computed: {
    loginName() {
      return this.isQr ? 'SmLogin' : 'AcLogin';
    },
  },
  components: {
    SmLogin,
    AcLogin,
  },
};
</script>

<style scoped>
.login {
  width: 400px;

  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.login .login-header {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #ccc;
}

.login .login-header span {
  flex: 1;

  text-align: center;
  color: #333;
  font-size: 18px;
  padding: 8px 0;
}

.login .login-header span:hover {
  color: #e4393c;
  font-weight: 700;
}

.login .login-header span:nth-child(2) {
  flex: 0;
  width: 1px;
  height: 4px;
  border-left: 1px solid #ccc;
}

.login .login-header span.active {
  color: #e4393c;
  font-weight: 700;
}
</style>