You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
2.2 KiB
92 lines
2.2 KiB
<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") }} <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>
|