vueテキストが非表示の展開を超えて閉じます
4178 ワード
vueテキストが非表示の展開を超えて閉じます
まず、非表示にする必要があるコンテンツブロックに固定高さを書き、非表示にする必要があります.
showMore:false showHeight:20//テキストデフォルト高さisLongContent:false//展開終了ボタンデフォルトは表示されません
domのロードが完了した後にrefを通じてdivの本当の高さclientHeightを取得します
まず、非表示にする必要があるコンテンツブロックに固定高さを書き、非表示にする必要があります.
<div
//class="checkboxHeight"// overflow:hidden; ...
:style="{height:showMore?'auto':showHeight+'px'}"
>
<p ref="ref"> </p>
</div>
<a-button
type="link"
v-show="isLongContent"
style="float:right;"
@click.stop="showMore2"
>
{{showMore?' ':' '}}
<a-icon v-if="!showMore" type="down" />
<a-icon v-else type="up" />
</a-button>
showMore:false showHeight:20//テキストデフォルト高さisLongContent:false//展開終了ボタンデフォルトは表示されません
this.$nextTick(() => {
//const contentHeightThreshold = 20;
let contentHeight = this.$refs.checkbox[3].$el.clientHeight;
if (contentHeight > showHeight) {
this.showHeight = showHeight;
this.isLongContent = true;
} else {
this.isLongContent = false;
}
});
domのロードが完了した後にrefを通じてdivの本当の高さclientHeightを取得します