使用vant制作彈框，具體如下：

html層

<van-popupv-model="show"closeableclass="dialog-test"close-icon="close"close-icon-position="top-right":style="{ height: '30%' }"><div class="dialog-content"><div v-for="(item, index) in multipleContent" :key="`dialog_${index}`"><div class="title">{{ item.title }}</div><div class="container"><p v-for="(p, i) in item.content" :key="i" class="content">{{ p }}</p></div></div></div></van-popup>

---

data層：

import { Dialog, Popup } from "vant";

因?yàn)槲淖质潜容^多的，所以我們直接將文本內(nèi)容放在數(shù)據(jù)里面，方便維護(hù)和修改。

multipleContent: [{title: "設(shè)計(jì)說(shuō)明",content: ["1. 請(qǐng)圍繞CS:GO設(shè)計(jì)游戲周邊，作品要求原創(chuàng)，如使用到游戲內(nèi)官方元素則需進(jìn)行二次創(chuàng)作。","2. 周邊設(shè)計(jì)類別不限，除“T恤”和“鼠標(biāo)墊”有單獨(dú)的展示模塊，其余類別設(shè)計(jì)均請(qǐng)投稿至“其他”模塊。","3. 創(chuàng)作不限美術(shù)風(fēng)格，不限展示模板和載體，可使用大賽給出的模板（見(jiàn)資源下載部分）。","4. 作品可包含但不限于周邊設(shè)計(jì)稿、過(guò)程稿、創(chuàng)意靈感圖等，上傳圖片具體要求如下：","【尺寸】16:9","【大小】2M以內(nèi)，清晰可辨","【格式】jpg/png/gif","5. 請(qǐng)?jiān)凇拔乙陡濉表?yè)面提交作品展示圖及設(shè)計(jì)源文件，超過(guò)50mb的源文件則請(qǐng)單獨(dú)發(fā)送至官方郵箱csgo_cn@wanmei.com","6. 同時(shí)也歡迎大家以視頻的形式記錄周邊創(chuàng)作過(guò)程和背后故事，并分享至專題頁(yè)；視頻不在參賽范圍，但精彩視頻會(huì)獲官方推薦，還有機(jī)會(huì)得點(diǎn)卡獎(jiǎng)勵(lì)哦！"]},{title: "參賽須知",content: ["1. 參賽者在提交作品前請(qǐng)確保已經(jīng)閱讀并且愿意遵守相關(guān)比賽規(guī)則，參賽者所有圖片文字都需要經(jīng)過(guò)主辦方審核后才可發(fā)布，任何違反比賽規(guī)則的作品，主辦方有權(quán)取消其參賽資格。","2. 參賽者提交的參賽作品均須未被商用、未授權(quán)他人使用、未參加其他同類比賽，必須為參賽者原創(chuàng)，不得抄襲、盜用他人作品，且版權(quán)未移交他人。（如作品中含有素材元素<非原創(chuàng)部分>，作者需擁有該素材版權(quán)的使用授權(quán)許可）若在比賽或商業(yè)應(yīng)用過(guò)程中發(fā)生版權(quán)糾紛，主辦方有權(quán)追回已經(jīng)發(fā)放的獎(jiǎng)金，其法律責(zé)任由參賽者本人承擔(dān)）","3. 參賽期間，參賽者不得將參賽作品轉(zhuǎn)讓或授權(quán)給任何第三方，不得用參賽作品參與與本賽事相同或類似的其他活動(dòng)。","4. 如多人合作，需征得所有合作者同意并標(biāo)明所有合作者姓名；同一用戶名可上傳多組不同參賽作品，出現(xiàn)同一作品重復(fù)投稿情況則以第一次投稿作品為準(zhǔn)；評(píng)選結(jié)果以作品為單位，即同一用戶名可獲得多個(gè)獎(jiǎng)項(xiàng)。","5. 為保證本次賽事活動(dòng)的公平公正，參賽作品不得添加任何與本次大賽無(wú)關(guān)的第三方LOGO，主辦方在職員工參賽一律不參與評(píng)獎(jiǎng)。","6. 為了作品呈現(xiàn)的統(tǒng)一性以及便于主辦方的傳播推廣，請(qǐng)使用本次大賽專題頁(yè)的投稿功能上傳作品，并注意作品的大小、尺寸、格式等模板要求，但模板要求不作為決定作品獲獎(jiǎng)的必要因素。","7. 請(qǐng)參賽者注意截稿時(shí)間及時(shí)投稿，進(jìn)入評(píng)審階段前，參賽者可以對(duì)作品進(jìn)行修改調(diào)整，重新提交后需再次審核。參賽作品不得涉及色情、暴力，不得發(fā)表違法、惡搞、冒名、過(guò)于潦草隨意等不符合參賽要求的'占位'作品。","8. 大賽專題頁(yè)為唯一報(bào)名參賽渠道，請(qǐng)參賽者按照賽事規(guī)定報(bào)名參賽，并上傳參賽作品（其他渠道報(bào)名及參賽的作品均視為參賽無(wú)效）。","9. 因賽事中后期作品上傳量較大，請(qǐng)參賽者合理安排參賽時(shí)間，及時(shí)交稿，避免重復(fù)上傳或上傳失敗。"," 10. 大賽期間進(jìn)行創(chuàng)作交流和信息咨詢，請(qǐng)加入官方交流群，QQ群796851868。"]},{title: "相關(guān)權(quán)益",content: ["1. 一等獎(jiǎng)作品的知識(shí)產(chǎn)權(quán)歸主辦方公司所有。在主辦方支付相應(yīng)獎(jiǎng)金后，主辦方有權(quán)對(duì)一等獎(jiǎng)作品進(jìn)行任何形式的使用，包括出版、發(fā)行、修改、授權(quán)、許可、活動(dòng)和各種商業(yè)開(kāi)發(fā)應(yīng)用等。作者可以保留對(duì)一等獎(jiǎng)作品的永久署名權(quán)。","2. 若主辦方需對(duì)一等獎(jiǎng)作品進(jìn)行進(jìn)一步完善或開(kāi)發(fā)、設(shè)計(jì)周邊產(chǎn)品，獲獎(jiǎng)作者需協(xié)助配合。","3. 主辦方擁有對(duì)所有參賽作品進(jìn)行展示、報(bào)道、宣傳及用于市場(chǎng)活動(dòng)的權(quán)利。主辦方如需對(duì)除一等獎(jiǎng)之外的作品進(jìn)行開(kāi)發(fā)、生產(chǎn)、銷售等商業(yè)用途，需取得作者書面許可，并向作者支付相應(yīng)設(shè)計(jì)費(fèi)用。","4. 所有作品一經(jīng)提交，將視為參賽作者同意并遵守比賽相關(guān)規(guī)定，若主辦方在按照活動(dòng)規(guī)則使用參賽作品時(shí)其著作權(quán)存在爭(zhēng)議，主辦單位不承擔(dān)因作品侵犯他人（或單位）的權(quán)利而產(chǎn)生的法律責(zé)任，由提供作品的參賽者承擔(dān)全部法律責(zé)任。","主辦方對(duì)本活動(dòng)保留最終解釋權(quán)。"]}],

---

滾動(dòng)條樣式

::-webkit-scrollbar {width: 10px;/*對(duì)垂直流動(dòng)條有效*/height: 10px;cursor: pointer;/*對(duì)水平流動(dòng)條有效*/ }/*定義滾動(dòng)條的軌道顏色、內(nèi)陰影及圓角 （特別注意border-radius 必須是要寫的，這里設(shè)置為0）*/ ::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.8);background-color: rgba(128, 0, 0, 0.8);border-radius: 0px; }/*定義滑塊顏色、內(nèi)陰影及圓角*/ ::-webkit-scrollbar-thumb {// border-radius: 7px;/* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); */background-color: rgba(255, 228, 225, 0.6);cursor: pointer; }/*定義兩端按鈕的樣式*/ ::-webkit-scrollbar-button {background-color: #7b0f0e;cursor: pointer; }/*定義右下角匯合處的樣式*/ ::-webkit-scrollbar-corner {background: #7b0f0e; }::-webkit-scrollbar-corner {background-color: #7b0f0e; } 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的使用vant 自定义弹框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。