vue：如何设计网页登录功能（涉及登录状态的切换、toast组件设计弹框）

---

一、前言

上一篇文章介绍了如何实现短信验证码倒计时、实现手机登录并储存token的功能。这一篇文章将会介绍有关登录状态的切换、toast组件设计弹框的内容。

---

二、登陆状态的切换

在本项目中，我们想先实现用户登录后，“登录”按钮则显示为“购物车”按钮，为后期的数据渲染做准备。为此，我们设计了函数chanIsLogined()，步骤如下：

1.注册LoginStatus组件

显然，chanIsLogined()应该是一个全局功能，因此在store下新建LoginStatus文件夹，在其下新建index.js，具体代码如下：

export default {
  namespaced: true,
  state: {
    isLogined: false
  },
  getters: {
  },
  mutations: {
    chanIsLogined(state, payload) {
      state.isLogined = payload
    }
  },
  actions: {
  },
  modules: {
  }
}

2.在全局index.js文件中进行引入

import LoginStatus from './LoginStatus'

3.在Login.vue中引入并解构

import { mapMutations } from 'vuex'
...
...mapMutations({
      chanIsLogined:"LoginStatus/chanIsLogined"
    })

之后就可以在该页面调用函数使用了。

this.chanIsLogined(true);

三、toast组件设计弹框

之前的弹框都是通过alert()简单实现的，现在我们用toast封装组件样式并进行调用。

1.新建Toast.vue书写组件及其样式

<template>
  <div class="toast">
    <i class="iconfont icon-toast_chenggong"></i>
    <span>请填写正确手机号</span>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>
 
<style lang = "less" scoped>
  .toast{
    position:fixed;
    left:50%;
    transform: translate(-50%,0);
    background: #fff;
    border-radius: 10px;
    padding:10px 20px;
    font-size: 18px;
    box-shadow: 0 0 10px #fff;
    i{
      margin-right:10px;
      font-size: 20px;
    }
    .icon-toast_chenggong{
      color:green;
    }
    .icon-toast-shibai_huaban{
    color: red;
    }
    .icon-toast_chenggong{
    color: green;
    }
    .icon-toast-jinggao{
    color: orange;
    }
  }
</style>

iconfont的css文件可以放在assets-css-global.less中，代码如下：

@font-face {
  font-family: "iconfont"; /* Project id 2730880 */
  src: url('//at.alicdn.com/t/font_2730880_ylrio3ahhx.woff2?t=1628774839169') format('woff2'),
       url('//at.alicdn.com/t/font_2730880_ylrio3ahhx.woff?t=1628774839169') format('woff'),
       url('//at.alicdn.com/t/font_2730880_ylrio3ahhx.ttf?t=1628774839169') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-yduifuxuankuangxuanzhong:before {
  content: "\e685";
}

.icon-yduifuxuankuang:before {
  content: "\e686";
}

.icon-loading:before {
  content: "\e722";
}

.icon-toast-shibai_huaban:before {
  content: "\e635";
}

.icon-toast-jinggao:before {
  content: "\e621";
}

.icon-toast_chenggong:before {
  content: "\ea0a";
}

2.在App.vue中引入toast组件

<Toast v-show="isshowToast"></Toast>
...
import Toast from "@/components/Toast.vue"
export default {
  components:{
    TopBar,
    Header,
    Footer,
    Login,
    Toast
},

3.注册ToastStatus组件

同理，在store下新建ToastStatus文件夹，在其下新建index.js，具体代码如下：

export default {
  namespaced: true,
  state: {
    isshowToast: false
  },
  getters: {
  },
  mutations: {
    chanIsshowToast(state, payload) {
      state.isshowToast = payload
    }
  },
  actions: {
  },
  modules: {
  }
}

4.在全局index.js文件中进行引入

import ToastStatus from './ToastStatus'

5.在App.vue中调用mapState

computed:{
  ...mapState({
    isshowToast:state=>state.ToastStatus.isshowToast
  })
},

之后，在需要的页面同理调用chanIsshowToast()。

6.为Toast组件设计进场、离场过渡动画

Vue提供了transition组件，配合css3可以用来做进场离场效果：https://cn.vuejs.org/v2/guide/transitions.html

在App.vue中做如下代码，则可设计淡入、淡出的过渡效果：

<transition name="fade"> <Toast v-show="isshowToast"></Toast></transition>
...
.fade-enter, .fade-leave-to{
    opacity:0;
  }
  
.fade-enter-active, .fade-leave-active{
  transition: all .5s;
}

.fade-enter-to, .fade-leave{
  opacity: 1;
}

---

四、总结

以上就是今天要讲的内容，本文仅仅简单介绍了登录状态的切换、运用toast组件设计弹框。下一篇将具体讲解微信扫码登录功能如何实现。今天的复盘到此结束！