LineClamp 按行折叠

<script setup lang="ts">
  import { LineClamp, Stack } from '@hina-ui/vue'

  const synopsis =
    '旧书商人每年秋天沿着运河北上，把一船的书卖给沿岸的小镇。今年船上多了一位不请自来的乘客：一个自称在找一本不存在的书的少女。她记得那本书的每一页，却说不出书名与作者。两人约定，她沿途替他整理书目，他带她到运河尽头的图书馆。每停靠一座小镇，就有一位读者认出她口中的某个段落，也各自讲出一个不同的结局。'
</script>

<template>
  <Stack class="w-full max-w-md" gap="lg">
    <LineClamp :lines="2">{{ synopsis }}</LineClamp>
    <LineClamp :lines="4">{{ synopsis }}</LineClamp>
  </Stack>
</template>

<script setup lang="ts">
  import { LineClamp, Text } from '@hina-ui/vue'
</script>

<template>
  <LineClamp :lines="4" class="w-full max-w-md">
    <Text size="sm" tone="muted">
      第一卷收录连载的前十二话，从转学第一天写到那年的文化祭。单行本修订了连载时的全部对白，并重绘了三处跨页。
    </Text>
    <Text size="sm" tone="muted">
      卷末附有两篇未公开的短篇。一篇以摄影部顾问的视角补完了旧相机的来历，另一篇是发生在暑假的番外，讲两人为了拍到一场流星雨在天台守了整整一夜。
    </Text>
    <Text size="sm" tone="muted">
      初版随书附赠一张明信片，图案为封面的线稿。电子版不含赠品，正文内容与纸质版一致。
    </Text>
  </LineClamp>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Button, LineClamp, Stack } from '@hina-ui/vue'

  const expanded = ref(false)
</script>

<template>
  <Stack class="w-full max-w-md">
    <Button
      variant="outline"
      tone="neutral"
      size="sm"
      class="self-start"
      @click="expanded = !expanded"
    >
      {{ expanded ? '收起简介' : '展开简介' }}
    </Button>
    <LineClamp v-model:expanded="expanded" :lines="2">
      山顶的气象站只剩下一名观测员。每天早晨六点，他把前一夜的风速与气压抄进日志，再用无线电报给山下的小镇。入冬后的第一场雪封住了山路，无线电的另一端却换成了一个陌生的声音，自称来自三十年前的同一座气象站。
    </LineClamp>
  </Stack>
</template>

<script setup lang="ts">
  import { LineClamp } from '@hina-ui/vue'
</script>

<template>
  <LineClamp expand-label="查看全文" collapse-label="收起全文" class="w-full max-w-md">
    读到第三卷才发现，前两卷里那些看似随手写下的天气记录全是伏笔。作者没有用任何一句解释去点破它，只是让同一段无线电通话在不同的季节里重复了三次。合上书以后我把第一卷又翻了一遍，这一次每一页都像是另一本书。推荐给喜欢慢节奏叙事的读者。
  </LineClamp>
</template>