使用vant?自定義彈框全過程
vant 自定義彈框
使用vant制作彈框,具體如下:
html層
<van-popup v-model="show" closeable class="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";
因為文字是比較多的,所以我們直接將文本內(nèi)容放在數(shù)據(jù)里面,方便維護和修改。
multipleContent: [ { title: "設計說明", content: [ "1. 請圍繞CS:GO設計游戲周邊,作品要求原創(chuàng),如使用到游戲內(nèi)官方元素則需進行二次創(chuàng)作。", "2. 周邊設計類別不限,除“T恤”和“鼠標墊”有單獨的展示模塊,其余類別設計均請投稿至“其他”模塊。", "3. 創(chuàng)作不限美術風格,不限展示模板和載體,可使用大賽給出的模板(見資源下載部分)。", "4. 作品可包含但不限于周邊設計稿、過程稿、創(chuàng)意靈感圖等,上傳圖片具體要求如下:", "【尺寸】16:9", "【大小】2M以內(nèi),清晰可辨", "【格式】jpg/png/gif", "5. 請在“我要投稿”頁面提交作品展示圖及設計源文件,超過50mb的源文件則請單獨發(fā)送至官方郵箱csgo_cn@wanmei.com", "6. 同時也歡迎大家以視頻的形式記錄周邊創(chuàng)作過程和背后故事,并分享至專題頁;視頻不在參賽范圍,但精彩視頻會獲官方推薦,還有機會得點卡獎勵哦!" ] }, { title: "參賽須知", content: [ "1. 參賽者在提交作品前請確保已經(jīng)閱讀并且愿意遵守相關比賽規(guī)則,參賽者所有圖片文字都需要經(jīng)過主辦方審核后才可發(fā)布,任何違反比賽規(guī)則的作品,主辦方有權取消其參賽資格。", "2. 參賽者提交的參賽作品均須未被商用、未授權他人使用、未參加其他同類比賽,必須為參賽者原創(chuàng),不得抄襲、盜用他人作品,且版權未移交他人。(如作品中含有素材元素<非原創(chuàng)部分>,作者需擁有該素材版權的使用授權許可)若在比賽或商業(yè)應用過程中發(fā)生版權糾紛,主辦方有權追回已經(jīng)發(fā)放的獎金,其法律責任由參賽者本人承擔)", "3. 參賽期間,參賽者不得將參賽作品轉(zhuǎn)讓或授權給任何第三方,不得用參賽作品參與與本賽事相同或類似的其他活動。", "4. 如多人合作,需征得所有合作者同意并標明所有合作者姓名;同一用戶名可上傳多組不同參賽作品,出現(xiàn)同一作品重復投稿情況則以第一次投稿作品為準;評選結(jié)果以作品為單位,即同一用戶名可獲得多個獎項。", "5. 為保證本次賽事活動的公平公正,參賽作品不得添加任何與本次大賽無關的第三方LOGO,主辦方在職員工參賽一律不參與評獎。", "6. 為了作品呈現(xiàn)的統(tǒng)一性以及便于主辦方的傳播推廣,請使用本次大賽專題頁的投稿功能上傳作品,并注意作品的大小、尺寸、格式等模板要求,但模板要求不作為決定作品獲獎的必要因素。", "7. 請參賽者注意截稿時間及時投稿,進入評審階段前,參賽者可以對作品進行修改調(diào)整,重新提交后需再次審核。參賽作品不得涉及色情、暴力,不得發(fā)表違法、惡搞、冒名、過于潦草隨意等不符合參賽要求的'占位'作品。", "8. 大賽專題頁為唯一報名參賽渠道,請參賽者按照賽事規(guī)定報名參賽,并上傳參賽作品(其他渠道報名及參賽的作品均視為參賽無效)。", "9. 因賽事中后期作品上傳量較大,請參賽者合理安排參賽時間,及時交稿,避免重復上傳或上傳失敗。", " 10. 大賽期間進行創(chuàng)作交流和信息咨詢,請加入官方交流群,QQ群796851868。" ] }, { title: "相關權益", content: [ "1. 一等獎作品的知識產(chǎn)權歸主辦方公司所有。在主辦方支付相應獎金后,主辦方有權對一等獎作品進行任何形式的使用,包括出版、發(fā)行、修改、授權、許可、活動和各種商業(yè)開發(fā)應用等。作者可以保留對一等獎作品的永久署名權。", "2. 若主辦方需對一等獎作品進行進一步完善或開發(fā)、設計周邊產(chǎn)品,獲獎作者需協(xié)助配合。", "3. 主辦方擁有對所有參賽作品進行展示、報道、宣傳及用于市場活動的權利。主辦方如需對除一等獎之外的作品進行開發(fā)、生產(chǎn)、銷售等商業(yè)用途,需取得作者書面許可,并向作者支付相應設計費用。", "4. 所有作品一經(jīng)提交,將視為參賽作者同意并遵守比賽相關規(guī)定,若主辦方在按照活動規(guī)則使用參賽作品時其著作權存在爭議,主辦單位不承擔因作品侵犯他人(或單位)的權利而產(chǎn)生的法律責任,由提供作品的參賽者承擔全部法律責任。", "主辦方對本活動保留最終解釋權。" ] } ],
滾動條樣式
::-webkit-scrollbar { width: 10px; /*對垂直流動條有效*/ height: 10px; cursor: pointer; /*對水平流動條有效*/ } /*定義滾動條的軌道顏色、內(nèi)陰影及圓角 (特別注意border-radius 必須是要寫的,這里設置為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; }
vant 彈框和彈出層
今天發(fā)現(xiàn)一個關于vant 彈框和彈出層的一個樣式問題
一旦父節(jié)點用上transform:translate(); 或者用animation: mt 1s both;中mt 里面定義了transform:translate()后,子節(jié)點 van-dialog和van-popup 上下定位出問題的. 注意了!
<style> bigWrap{ transform:translate(0, 0) } </style>
<van-dialog use-slot v-model="isShow" :confirmButtonText="$t('btn.cancelBtn')"> <div :class="['codeTitle',type] "></div> ? ? ? <img :src="require(`@/assets/img/${type}${radio}.png`)" /> ?</van-dialog> ? ? ? <!-- <van-popup v-model="isShow"> ? ? ? ? <div :class="['codeTitle',type] "></div> ? ? ? ? <img :src="require(`@/assets/img/${type}${radio}.png`)" /> ? ? ? </van-popup> -->
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue3+ts+elementui-plus二次封裝彈框?qū)崙?zhàn)教程
這篇文章主要介紹了vue3+ts+elementui-plus二次封裝彈框?qū)崙?zhàn)教程,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07vue.config.js中devServer.proxy配置說明及配置正確不生效問題解決
Vue項目devServer.proxy代理配置詳解的是一個非常常見的需求,下面這篇文章主要給大家介紹了關于vue.config.js中devServer.proxy配置說明及配置正確不生效問題解決的相關資料,需要的朋友可以參考下2023-02-02vue+springboot實現(xiàn)項目的CORS跨域請求
這篇文章主要介紹了vue+springboot實現(xiàn)項目的CORS跨域請求,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09