ShowEasyFrontEnd/FrontEnd/components/exhibition/ExhibitionDetailDescription.vue

<template>
  <v-row class="mb-6">
    <v-col cols="12">
      <div
        ref="descripttextarea"
        :class="expand ? 'lineDescriptionClamp' : ''"
        v-html="exhibition.description"
      ></div>
      <p></p>
      <div class="tw-hidden lg:tw-block">
        <div
          v-if="hide"
          class="d-flex justify-center primary--text"
          @click="expand = !expand"
        >
          <a
            >{{ expand ? $t("See more") : $t("See less") }} &nbsp;&nbsp;<v-icon
              color="primary"
              >{{ expand ? "mdi-chevron-down" : "mdi-chevron-up" }}</v-icon
            ></a
          >
        </div>
      </div>
      <div class="lg:tw-hidden">
        <button
          v-if="hide"
          class="d-flex justify-center primary--text tw-w-full tw-body-3 tw-rounded-lg tw-text-primary-1 tw-border-solid tw-border-[1px] tw-border-primary-1 tw-py-[10px] tw-px-[130px] tw-whitespace-nowrap"
          @click="$modal.show('SeeMoreDetailDescripition')"
        >
          See more
        </button>
      </div>

      <SeeMoreDetailDescripition
        v-bind:SeeMoreDetailDescripition="exhibition.description"
      ></SeeMoreDetailDescripition>
    </v-col>
  </v-row>
</template>

<script>
import VClamp from "vue-clamp";
import SeeMoreDetailDescripition from "@/components/exhibition/SeeMoreDetailDescription.vue";
export default {
  name: "ExhibitionDetailDescription",
  components: {
    VClamp,
    SeeMoreDetailDescripition,
  },
  props: {
    exhibition: {
      type: Object,
      default: () => ({
        description: "",
      }),
      SeeMoreDetailDescripition: {
        type: Object,
      },
    },
  },
  data() {
    return {
      expand: true,
      hide: false,
    };
  },
  mounted() {
    this.$refs.descripttextarea.scrollHeight > 240
      ? (this.hide = true)
      : (this.hide = false);
  },
  updated() {
    this.$refs.descripttextarea.scrollHeight > 240
      ? (this.hide = true)
      : (this.hide = false);
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.lineDescriptionClamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
  overflow: hidden;
}

a:hover {
  color: #ee9546;
}
</style>