Componente

Introducción

El componente Error tendrá la funcionalidad de mostrar detalles del error ocurrido y brindar un link hacía otra página del sitio.

Uso

Es importante recalcar el nombre del componente IrError a nivel de código, ya que este deberá usarse para llamar al componente para renderizarlo.

El componente espera recibir en la entrada de la capa de datos un objeto con la siguiente estructura.

  {
    "principal":"404",
    "titulo": {
      "size": "large",
      "titulo": "Ups...!",
      "type": "IrTitulo",
      "visible": true
    },
    "descripcion": "Algo salio mal. El administrador ya ha sido notificado de este inconveniente.",
    "link": {
      "to": "/",
      "text": "Voler al Home"
    }
  }

Ejemplo

Propiedades

Propiedad	Tipo	Default	Descripción
principal	String	''	Texto principal del componente. Normalmente utilizado para mostrar código de error. Ejemplo: 404. Si no está valorizado, no se mostrará.
titulo	Object	{}	Ésta propiedad tiene la misma estructura que las propiedades del componente IrTitulo. A excepción de la propiedad width que no es de utilidad en este componente.
descripcion	String	' '	Texto que se mostrará debajo del título.
link	Object	{ to: '/', text: '' }	Determina el link que se rendereizará. La propiedad to determina a dónde se va a redirigir. La propiedad text determina el texto que se mostrará para el link.

Código fuente

<template>
  <div class="container d-flex align-center flex-column">
    <h1 class="font-weight-black" :style="{fontSize: '80px'}" v-if="principal">{{principal}}</h1>
    <ir-titulo
      v-bind="titulo"
      >
    </ir-titulo>
    <p class="font-weight-black text-center" :style="{fontSize: '18px'}">{{descripcion}}</p>
    <a :href="link.to">{{link.text}}</a>
  </div>
</template>

<script>
import IrTitulo from '../formularios/IrTitulo/IrTitulo.vue'
export default {
  name: 'IrError',
  components: {
    IrTitulo
  },
  data() {
    return {
    }
  },
  props: {
    principal:{
      type: String,
      required: false
    },
    titulo: {
      type: Object,
      default: () => ({})
    },
    descripcion: {
      type: String,
      default: ''
    },
    link: {
      type: Object,
      default: () => ({
        to: '/',
        text: ''
      })
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  gap: 10px;
}
</style>