vue實現文章內容過長點選閱讀全文功能

2021-09-08 13:48:27 字數 839 閱讀 5770

直接上**:

html:

<

div

class

="bodyfont clearfloat"

id="bodyfont"

ref="bodyfont"

:class

="">

<

div

v-html

="content"

>

div>

div>

<

div

class

="contenttoggle"

v-if

="contentstatus"

@click

="contentstatus=!contentstatus"

>閱讀全文

div>

css:

.bodyfont}

.bodyheight.contenttoggle

js:

data()

},mounted(),500)

},methods:

else},}

效果如圖:

實現思路與注意的點:

1、獲取內容的高度要等到dom載入完成之後,在mounted裡加乙個settimeout函式,保證能真正獲取到

2、當內容的高度高於自己設定的要展示的高度的時候,則只限定在自己要展示的高度中,加乙個class解決,注意要overflow:hidden;

vue實現文章內容過長點選閱讀全文功能

直接上 html div class bodyfont clearfloat id bodyfont ref bodyfont class div v html content div div div class contenttoggle v if contentstatus click cont...

python 實現文章內容統計

實現對目標檔案所有字元統計,單獨不重複字元統計,並通過字典列印以及寫入excel,以檔案的形式輸出統計的結果。data read data 為 read 返回的結果 generate excel data generate excel 函式傳入引數 data for key,value in dat...

jquery實現文章內容展開收縮

小蝸牛問媽媽 為什麼我們從生下來,就要揹負這個又硬又重的殼呢?媽媽 因為我們的身體沒有骨骼的支撐,只能爬,又爬不快。所以要這個殼的保護!小蝸牛 毛蟲姊姊沒有骨頭,也爬不快,為什麼她卻不用背這個又硬又重的殼呢?媽媽 因為毛蟲姊姊能變成蝴蝶,天空會保護她啊。小蝸牛 可是蚯蚓弟弟也沒骨頭爬不快,也不會變成...