错误提示组件的开发技巧

最新推荐文章于 2024-07-26 11:41:15 发布

小二李

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量254

点赞数 2

分类专栏： Vue 3.0实战项目之『万年历』文章标签： javascript 前端 typescript

本文链接：https://blog.csdn.net/weixin_43800535/article/details/136630476

版权

Vue 3.0实战项目之『万年历』专栏收录该内容

14 篇文章 1 订阅

订阅专栏

文章描述了一个Vue组件ErrorTip，它用于显示错误信息，通过Vuex状态管理器存储错误代码和对应的错误消息。在Day.vue中，当errorCode不存在时，会显示相关错误提示并加载数据。

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

src\components\ErrorTip\index.vue

<template>
  <div class="error-tip">
    <img :src="require('../../assets/img/error.png')" />
    <p>{{ errorData[errorCode] }}</p>
  </div>
</template>

<script>
import errorData from '@/data/error'

import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'ErrorTip',
  setup(props) {
    const store = useStore()

    return {
      errorCode: computed(() => store.state.errorCode),
      errorData
    }
  },
}
</script>

src\data\error.js

export default {
  "217701": "未搜索到数据",
  "217702": "输入的日期格式错误",
  "10001": "无请求权限",
  "10002": "无请求权限",
  "10003": "无请求权限",
  "10004": "无请求权限",
  "10005": "无请求权限",
  "10007": "未知的请求源",
  "10008": "IP被禁止使用该功能",
  "10009": "无请求权限",
  "10011": "超过搜索数据限制次数",
  "10012": "超过搜索数据限制次数",
  "10013": "超过搜索数据限制次数",
  "10014": "系统正在维护",
  "10020": "系统正在维护",
  "10021": "系统正在维护",
};

src\views\Day.vue

<template>
  <div class="container">
    <error-tip></error-tip>
    <div v-if="!errorCode">
      <day-card :data="dayData"></day-card>
      <day-list :data="dayData"></day-list>
    </div>
  </div>
</template>