vue中toast 组件的封装

62 阅读 0 评论 41 点赞

我是靠谱客的博主大力西牛，最近开发中收集的这篇文章主要介绍vue中toast 组件的封装，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

views/login/Login.vue

<template>
  <div class="wrapper">
    <!--    <img class="wrapper__img" src="http://www.dell-lee.com/imgs/vue3/login.png"/>-->
    <img class="wrapper__img" src="http://www.dell-lee.com/imgs/vue3/user.png"/>
    <div class="wrapper__input">
      <input type="text" class="wrapper__input__content" placeholder="请输入手机号">
    </div>

    <div class="wrapper__input">
      <input type="text" class="wrapper__input__content" placeholder="请输入密码">
    </div>
    <div class="wrapper__login-button" @click="handleLogin">登陆</div>
    <div class="wrapper__login-link">立即注册</div>
    <Toast v-if="toastData.showToast" :message="toastData.toastMsg"/>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
import { post } from '../../utils/request'
import Toast, { useToastEffect } from '../../components/Toast'

export default {
  name: 'Login',
  components: {
    Toast
  },
  setup () {
    const router = useRouter()
    const { toastData, showToast } = useToastEffect()

    const handleLogin = async () => {
      const result = post('/api/user/login', {
        username: '1',
        password: '1'
      })
      if (result?.error === 0) {
        console.log(result)
        router.push({ name: 'Home' })
      } else {
        showToast('登陆失败', 1000)
      }
    }
    return {
      router,
      toastData,
      handleLogin
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../style/viriables";
  /*@import "../../style/mixins";*/
  .wrapper {
    position: absolute;
    top: 25%;
    left: 0;
    right: 0;

    &__img {
      display: block;
      margin: 0 auto .4rem auto;
      width: .66rem;
      height: .66rem;
    }

    &__input {
      margin: 0 .4rem .16rem .4rem;
      padding: 0 .16rem;
      box-sizing: border-box;
      height: .48rem;
      background: #f9f9f9;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 6px;

      &__content {
        line-height: .48rem;
        border: none;
        outline: none;
        width: 100%;
        background: none;
        font-size: .16rem;
        color: $content-notice-fontcolor;

        &::placeholder {
          color: $content-notice-fontcolor;
          font-size: .14rem;
        }
      }
    }

    &__login-button {
      margin: .32rem .4rem .16rem .4rem;
      background: #0091ff;
      box-shadow: 0 .04rem 0.08rem 0 rgba(0, 145, 255, 0.32);
      border-radius: 4px;
      height: .48rem;
      line-height: .48rem;
      font-size: .16rem;
      text-align: center;
      color: #fff;
    }

    &__login-link {
      text-align: center;
      font-size: .14rem;
      color: $content-notice-fontcolor;

    }
  }

</style>

components/Toast.vue

<template>
 <div class="toast">{{message}}</div>

</template>

<script>
import { reactive } from 'vue'

export default {
 name: 'Toast',
 props: ['message']
}

export const useToastEffect = () => {
 const toastData = reactive({
   showToast: false,
   toastMsg: ''
 })

 const showToast = (msg, time = 2000) => {
   toastData.showToast = true
   toastData.toastMsg = msg
   setTimeout(() => {
     toastData.showToast = false
     toastData.toastMsg = ''
   }, time)
 }

 return {
   toastData,
   showToast
 }
}
</script>

<style lang="scss" scoped>

 .toast {
   position: fixed;
   left: 50%;
   top: 50%;
   color: #555;
   padding: .1rem;
   border-radius: .05rem;
   transform: translate(-50%, -50%);
   background: rgba(0, 0, 0, 0.3);
 }
</style>