Vue3 - 任意のコンテンツの展開/折りたたみ機能を実装するコンポーネントプラグインです。クリックして他のコンテンツを表示し、段落テキストの展開と折りたたみ効果を制御します。非表示にする行数のカスタマイズ、展開位置のカスタマイズをサポートしています。折りたたみボタン、展開機能と折りたたみ機能、スロットを自動計算さまざまなスタイルでフォームをカスタマイズ

序文

Vue2 バージョンの展開および折りたたみ機能が必要な場合は、この記事を参照してください。

この記事では、vue3 でコンテンツの高さを指定する機能コンポーネント (固定の高さを超えると非表示) を実装し、ユーザーがクリックして展開したり折りたたんだり (折りたたみ効果) してさらに多くのコンテンツを表示します。

コンポーネントには任意のコンテンツを渡すことができます (コンポーネントはコンテンツを自動的に計算します)。また、「コンテナーが非表示になる高さ」、展開ボタンと折りたたみボタンの位置、その他のスタイルを指定することもできます。

以下の図に示すように、コンテンツがプレーンテキスト、div コンテナー、またはラベル要素のいずれであっても、自動的に計算できます。

指定行数より短い場合はボタンが表示されません！

组件源码干净整洁，无任何乱七八糟的样式

ここに画像の説明を挿入します

コンポーネントの場所は重要ではありません。正しく導入されていることを確認してください。

componentsフォルダーの下に新しいcollapse.vueファイルを作成し、次のコードをワンクリックでコピーします。

<template