最近項(xiàng)目里面有個(gè)新需求婴梧，試卷預(yù)覽下梢，里面有選擇題，但是每道選擇題的選項(xiàng)長短不一塞蹭，產(chǎn)品要求孽江，如果選項(xiàng)比較短，就一行展示番电，如果長岗屏，就一行展示一項(xiàng)
思路：頁面加載完判斷，所有選項(xiàng)的長度加起來是否超過外層寬度的100%漱办，如果超過給父級(jí)加一個(gè)wrap類名
image.png
實(shí)現(xiàn)方法：如圖所示这刷，一個(gè)ul代表一個(gè)題目的選項(xiàng)，changeWrap（）是一個(gè)判斷是否換行的事件娩井，第一個(gè)參把對(duì)應(yīng)的ul傳過去暇屋，得到所有的li的寬度，注意事件里面要寫$nextTick（頁面一定要渲染完成之后再執(zhí)行）洞辣，得到總寬度之后去和頁面寬度對(duì)比咐刨，分別返回true和false，此時(shí)第二個(gè)注意的點(diǎn)扬霜，不能直接通過changeWrap事件去返回true所宰、false，因?yàn)樵陧撁婕虞d的時(shí)候畜挥，這個(gè)事件不會(huì)執(zhí)行仔粥，應(yīng)該在changeWrap事件里面，去更改頁面的數(shù)據(jù)，然后驅(qū)動(dòng)視圖更新躯泰。
image.png
