SeeMore

Es un componente con la funcionalidad que permite que un texto se acorte y añada un botón de “Ver más” cuando sobrepasa una cierta longitud. Cuando se pulsa el botón de “Ver más” se abre un modal donde se encuentra el texto entero y hay un botón para volver.

Si el texto no alcanza la longitud máxima entonces el texto se muestra si el botón.

Índice

1. Cómo usar.
2. Funcionamiento

1. Cómo usar.

Para usar el componente solo hay que importarlo y añadirle unas props que se necesiten.

Props:

• :text se tiene que pasar el texto que se va a mostrar. Es un dato de tipo “String” y opcional, si no se pone por defecto no añade contenido. Admite Strings con etiquetas “html”.
• :maxLength la longitud de carácteres máximos que se van a mostrar antes de que se corte el texto. Es dato numérico y opcional, por defecto son 100 caracteres.
• :lockScroll permite bloquear el scroll de la página mientras el modal está abierto. Es booleano y opcional, por defecto es false.

<p class="expect-container__p">
  <SeeMore :text="'Texto normal'" :maxLength="30" :lockScroll="true" />
</p>

2. Funcionamiento

El componente recibe por props el texto y la longitud máxima, si la longitud no se especifica se establece a 100 caracteres por defecto. Además, se hace una validación para que devuelva por consola un warning si se intoduce un valor negativo. La prop lockScroll recibe valor truo o false, por defecto es false, permite bloquear scroll de la página mientras está abierto el Modal, por defecto es false y permite hacer scroll en la página con el modal abierto.

const props = defineProps({
  text: { type: String, required: false, default: "" },
  lockScroll: { type: Boolean, required: false, default: false },
  maxLength: {
    type: Number,
    required: false,
    default: 100,
    validator: (value) => {
      return value >= 0;
    },
  },
});

En el template hace comprobaciones donde compara si la longitúd del texto es mayor que la longitúd máxima especificada, si lo es muestra el texto acortado con ’…’ y con el boton “Ver más”, si no lo es muestra el texto entero.

Además, “DOMPurify.sanitize(marked.parse(props.text))” permite recibir texto con etiquetas HTML para renderizarlas en el documento, también, comprueba que el tecto no contenga Scripts maliciosos.

<!-- Muestra texto entero -->
<template>
  <p
    v-if="props.text.length <= props.maxLength"
    v-html="DOMPurify.sanitize(marked.parse(props.text))"
  ></p>

  <div class="see-more" v-if="props.text.length > props.maxLength">
    <div
      class="see-more__p"
      v-html="
        DOMPurify.sanitize(marked.parse(props.text.substring(0, props.maxLength) + '...'))
      "
    ></div>
    <button class="see-more__button" @click="hideModal">Ver más</button>
  </div>
</template>

Para abrir el modal y cerrar se usa una variable reactiva booleana y una función que cambia la variable al opuesto de su valor.

Se aplica la función en el boton de “Ver más” y al componente “Modal”, el componente “Modal” en este ejemplo recibe la prop :lockScroll para bloquear el scroll de la página mientras el “Modal” está abierto. Además, al componente “Modal” se le añade el texto para que se muestre el texto entero en el Modal.

<script setup>
  const showModal = ref(false);

  const hideModal = () => {
    showModal.value = !showModal.value;
  };
</script>
<template>
  <div class="see-more" v-if="props.text.length > props.maxLength">
    <div
      class="see-more__p"
      v-html="
        DOMPurify.sanitize(marked.parse(props.text.substring(0, props.maxLength) + '...'))
      "
    ></div>
    <button class="see-more__button" @click="hideModal">Ver más</button>
  </div>

  <Transition name="modal">
    <Modal @hideModal="hideModal" v-if="showModal" :lockScroll="lockScroll"
      ><div v-html="DOMPurify.sanitize(marked.parse(props.text))"></div
    ></Modal>
  </Transition>
</template>