Vue自定义全局Toast和Loading

最新推荐文章于 2024-07-19 20:55:59 发布

darkerxi

最新推荐文章于 2024-07-19 20:55:59 发布

阅读量2.7k

点赞数 1

文章标签： Vue javascript 自定义 toast loading

本文链接：https://blog.csdn.net/qq_20097569/article/details/89361585

版权

本文介绍如何在不使用UI框架的Vue项目中，自定义全局的Toast和Loading组件，提升用户体验。首先创建`toast.vue`和`toast.js`，接着引入并使用Toast组件。同样方式创建`loading.vue`和`loading.js`，并在项目中引用及使用Loading组件。

摘要由CSDN通过智能技术生成

如果我们的Vue项目中没有用到任何UI框架的话，为了更好的用户体验，肯定会用到loading和toast。那么我们就自定义这两个组件吧。

1、Toast组件

首先，在common下新建global文件夹，存放我们的toast.vue和toast.js两个文件（当然文件的具体位置你可以自行安排）。

(1). toast.vue

<template lang="html">
  <div v-if="isShowToast" class="toast-container" @touchmove.prevent>
    <!-- 这里content为双花括号 -->
    <span class="loading-txt">{content}</span>
  </div>
</template>

<script>
export default {
    
  data () {
    
    return {
    
      isShowToast: true,
      content: ''
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.toast-container {
    
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
}
.toast-msg {
    
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  padding: 35px;
  border-radius: 10px;
  font-size: 28px;
  line-height: 36px;
  background