minnan/src/components/display/TextEllipsis.vue

<script setup lang="ts">
import { computed, ref } from 'vue';
import type { TextProps } from '../basic/Text.vue';
import Text from '../basic/Text.vue';
import FlexCol from '../layout/FlexCol.vue';

export interface TextEllipsisProps extends TextProps {
  lines?: number;
  expandable?: boolean;
  startOpen?: boolean;
  openText?: string;
  closeText?: string;
}


const emit = defineEmits(['expand', 'collapse']);
const props = withDefaults(defineProps<TextEllipsisProps>(), {
  lines: 1,
  startOpen: false,
  expandable: false,
  openText: '展开',
  closeText: '收起',
});

const open = ref(props.startOpen);
const currentLines = computed(() => {
  if (open.value)
    return undefined;
  return props.lines;
});

function handleClick() {
  open.value = !open.value;
  emit(open.value ? 'expand' : 'collapse');
}

defineOptions({
  options: {
    virtualHost: true,
    styleIsolation: "shared",
  },
})
</script>

<template>
  <FlexCol>
    <Text 
      :ellipsis="true" 
      :lines="currentLines"
      v-bind="$attrs"
    >
      <slot>
        {{ text }}
      </slot>
    </Text>
    <slot v-if="expandable" name="button" :onClick="handleClick">
      <Text 
        innerClass="nana-text-ellipsis-expand"
        touchable
        :text="open ? closeText : openText"
        color="primary" 
        @click="handleClick"
      />
    </slot>
  </FlexCol>
</template>

<style>
.nana-text-ellipsis-expand {
  /* #ifndef APP-NVUE */
  display: inline-block;
  /* #endif */
  text-align: right;
}
</style>