TextEllipsis 文本省略

# TextEllipsis 文本省略

Display ellipsis for long text and support for expanding or collapsing text.

# Usage

# Basic Usage

Show one rows by default.

<press-text-ellipsis :content="text" />

export default {
  setup() {
    const text =
      'Take your time and be patient. Life itself will eventually answer all those questions it once raised for you.';
    return { text };
  },
};

# Expand/Collapse

Support Expand/Collapse.

<press-text-ellipsis
  :content="text"
  expand-text="expand"
  collapse-text="collapse"
/>

export default {
  setup() {
    const text =
      "The fleeting time of one's life is everything that belongs to a person. Only this thing truly belongs to you. Everything else is just a momentary pleasure or misfortune, which will soon be gone with the passing of time.";
    return { text };
  },
};

# Customize rows

Display the number of rows by setting rows.

<press-text-ellipsis
  rows="3"
  :content="text"
  expand-text="expand"
  collapse-text="collapse"
/>

export default {
  setup() {
    const text =
      "That day, I turned twenty-one. In the golden age of my life, I was full of dreams. I wanted to love, to eat, and to instantly transform into one of these clouds, part alight, part darkened. It was only later that I understood life is but a slow, drawn-out process of getting your balls crushed. Day by day, you get older. Day by day, your dreams fade. In the end you are no different from a crushed ox. But I hadn't foreseen any of it on my twenty-first birthday. I thought I would be vigorous forever, and that nothing could ever crush me.";
    return { text };
  },
};

# Custom Collapse Position

Collapse the beginning part of the content:

<press-text-ellipsis
  rows="1"
  :content="text"
  expand-text="expand"
  collapse-text="collapse"
  position="start"
/>

export default {
  setup() {
    const text =
      "That day, I turned twenty-one. In the golden age of my life, I was full of dreams. I wanted to love, to eat, and to instantly transform into one of these clouds, part alight, part darkened. It was only later that I understood life is but a slow, drawn-out process of getting your balls crushed. Day by day, you get older. Day by day, your dreams fade. In the end you are no different from a crushed ox. But I hadn't foreseen any of it on my twenty-first birthday. I thought I would be vigorous forever, and that nothing could ever crush me.";
    return { text };
  },
};

Collapse the middle part of the content:

<press-text-ellipsis
  rows="2"
  :content="text"
  expand-text="expand"
  collapse-text="collapse"
  position="middle"
/>

export default {
  setup() {
    const text =
      "That day, I turned twenty-one. In the golden age of my life, I was full of dreams. I wanted to love, to eat, and to instantly transform into one of these clouds, part alight, part darkened. It was only later that I understood life is but a slow, drawn-out process of getting your balls crushed. Day by day, you get older. Day by day, your dreams fade. In the end you are no different from a crushed ox. But I hadn't foreseen any of it on my twenty-first birthday. I thought I would be vigorous forever, and that nothing could ever crush me.";
    return { text };
  },
};

# Custom Action

Use action slots to custom action.

<press-text-ellipsis :content="text">
  <template #action="{ expanded }">
    {{ expanded ? 'Collapse' : 'Expand' }}
  </template>
</press-text-ellipsis>

export default {
  setup() {
    const text =
      'Take your time and be patient. Life itself will eventually answer all those questions it once raised for you.';
    return { text };
  },
};

# API

# Props

Attribute	Description	Type	Default
rows	Number of rows displayed	number \| string	`1`
content	The text displayed	string	-
expand-text	Expand operation text	string	-
collapse-text	Collapse operation text	string	-
dots	Text content of ellipsis	string	`'...'`
position	Can be set to `start` `middle`	string	`'end'`

# Events

Event	Description	Arguments
click-action	Emitted when Expand/Collapse is clicked	event: MouseEvent

# Methods

Use ref (opens new window) to get TextEllipsis instance and call instance methods.

Name	Description	Attribute	Return value
toggle	Toggle expanded status	expanded?: boolean	-

# Slots

Name	Description	SlotProps
action	Custom action	{ expanded: boolean }

# Theming

# CSS Variables

The component provides the following CSS variables, which can be used to customize styles.

Name	Default Value	Description
--press-text-ellipsis-action-color	var(--press-blue)	Color of action text
--press-text-ellipsis-line-height	1.6	Line height of text

横屏

← Tag BackTop →