使用vant 自定义弹框

使用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";

因为文字是比较多的，所以我们直接将文本内容放在数据里面，方便维护和修改。

multipleContent: [{title: "设计说明",content: ["1. 请围绕CS:GO设计游戏周边，作品要求原创，如使用到游戏内官方元素则需进行二次创作。","2. 周边设计类别不限，除“T恤”和“鼠标垫”有单独的展示模块，其余类别设计均请投稿至“其他”模块。","3. 创作不限美术风格，不限展示模板和载体，可使用大赛给出的模板（见资源下载部分）。","4. 作品可包含但不限于周边设计稿、过程稿、创意灵感图等，上传图片具体要求如下：","【尺寸】16:9","【大小】2M以内，清晰可辨","【格式】jpg/png/gif","5. 请在“我要投稿”页面提交作品展示图及设计源文件，超过50mb的源文件则请单独发送至官方邮箱csgo_cn@wanmei.com","6. 同时也欢迎大家以视频的形式记录周边创作过程和背后故事，并分享至专题页；视频不在参赛范围，但精彩视频会获官方推荐，还有机会得点卡奖励哦！"]},{title: "参赛须知",content: ["1. 参赛者在提交作品前请确保已经阅读并且愿意遵守相关比赛规则，参赛者所有图片文字都需要经过主办方审核后才可发布，任何违反比赛规则的作品，主办方有权取消其参赛资格。","2. 参赛者提交的参赛作品均须未被商用、未授权他人使用、未参加其他同类比赛，必须为参赛者原创，不得抄袭、盗用他人作品，且版权未移交他人。（如作品中含有素材元素<非原创部分>，作者需拥有该素材版权的使用授权许可）若在比赛或商业应用过程中发生版权纠纷，主办方有权追回已经发放的奖金，其法律责任由参赛者本人承担）","3. 参赛期间，参赛者不得将参赛作品转让或授权给任何第三方，不得用参赛作品参与与本赛事相同或类似的其他活动。","4. 如多人合作，需征得所有合作者同意并标明所有合作者姓名；同一用户名可上传多组不同参赛作品，出现同一作品重复投稿情况则以第一次投稿作品为准；评选结果以作品为单位，即同一用户名可获得多个奖项。","5. 为保证本次赛事活动的公平公正，参赛作品不得添加任何与本次大赛无关的第三方LOGO，主办方在职员工参赛一律不参与评奖。","6. 为了作品呈现的统一性以及便于主办方的传播推广，请使用本次大赛专题页的投稿功能上传作品，并注意作品的大小、尺寸、格式等模板要求，但模板要求不作为决定作品获奖的必要因素。","7. 请参赛者注意截稿时间及时投稿，进入评审阶段前，参赛者可以对作品进行修改调整，重新提交后需再次审核。参赛作品不得涉及色情、暴力，不得发表违法、恶搞、冒名、过于潦草随意等不符合参赛要求的'占位'作品。","8. 大赛专题页为唯一报名参赛渠道，请参赛者按照赛事规定报名参赛，并上传参赛作品（其他渠道报名及参赛的作品均视为参赛无效）。","9. 因赛事中后期作品上传量较大，请参赛者合理安排参赛时间，及时交稿，避免重复上传或上传失败。"," 10. 大赛期间进行创作交流和信息咨询，请加入官方交流群，QQ群796851868。"]},{title: "相关权益",content: ["1. 一等奖作品的知识产权归主办方公司所有。在主办方支付相应奖金后，主办方有权对一等奖作品进行任何形式的使用，包括出版、发行、修改、授权、许可、活动和各种商业开发应用等。作者可以保留对一等奖作品的永久署名权。","2. 若主办方需对一等奖作品进行进一步完善或开发、设计周边产品，获奖作者需协助配合。","3. 主办方拥有对所有参赛作品进行展示、报道、宣传及用于市场活动的权利。主办方如需对除一等奖之外的作品进行开发、生产、销售等商业用途，需取得作者书面许可，并向作者支付相应设计费用。","4. 所有作品一经提交，将视为参赛作者同意并遵守比赛相关规定，若主办方在按照活动规则使用参赛作品时其著作权存在争议，主办单位不承担因作品侵犯他人（或单位）的权利而产生的法律责任，由提供作品的参赛者承担全部法律责任。","主办方对本活动保留最终解释权。"]}],

滚动条样式

::-webkit-scrollbar {width: 10px;/*对垂直流动条有效*/height: 10px;cursor: pointer;/*对水平流动条有效*/
}/*定义滚动条的轨道颜色、内阴影及圆角 （特别注意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;
}/*定义滑块颜色、内阴影及圆角*/
::-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 自定义弹框相关推荐

react离开页面，自定义弹框拦截，路由拦截
前言: 项目有个需求是:跳转路由,在离开页面前,需要弹框询问用户是否确定离开. 用react-router的<Prompt>组件是可以的,但是,怎么使用antd组件(或者说自定义组件)呢? ...
自定义弹框一（PopupWindow实现）响应两种点击事件
自定义弹框通常可以使用自定义的popupwindow,自定义的activity,自定义的dialog来实现这里先用popupwindow来实现并且可以在弹框上实现点击事件或者在其所依附的ac ...
android 系统弹框与自定义弹框
1. 系统弹框 private AlertDialog alertDialog; private void tipDialog(String value) { if (alertDia ...
element-ui 自定义弹框，加入图片
element 组件库里面有弹框组件. 实际项目中需要用到弹框.需求是在弹框的div里面放入一张图片. 用到的是element弹框组件的最后一个.自定义弹框组件 const h = this.$cre ...
jq js 自定义弹框
自定义弹框 <body> <script type="text/javascript" src="./js/jquery-1.8.3.js"& ...
一个常用的自定义弹框封装(适配 AndroidX),加载 ProgressDialog,状态显示的 StatusDialog 和自定义 Toast,全部支持背景颜色,圆角,边框和文字的自定义,构建者模
MNProgressHUD 项目地址:maning0303/MNProgressHUD 简介: 一个常用的自定义弹框封装(适配 AndroidX),加载 ProgressDialog,状态显示的 S ...
抖音短视频系统开发自定义弹框
我们如果想要实现这样的自定义弹框,需要怎么做呢,接下来就是教程首先,我们需要创建一个类继承Dialog 下面就是代码 import android.annotation.SuppressLint; ...
1. 使用Popup组件自定义弹框提示页面
Popup的基本使用在QT中,经常使用QMessageBox进行弹框的提示,而在QML中并没有这个功能,但是可以利用Popup组件进行自定义弹框的设计. 该组件可以理解为是一个空白区域,默认的vis ...
uniapp自定义弹框
uniapp自定义弹框,适用所有类型效果原理创建一个vue页面 pages.json配置一般tabbar中间按钮点击出现弹框注意事项效果原理利用透明页面,点击进入当前页面,内容根据自己需求 ...

使用vant 自定义弹框

使用vant 自定义弹框相关推荐

最新文章

热门文章