使用vant|使用vant 自定义弹框全过程使用vant自定义弹框全过程

vant 自定义弹框
vant 弹框和弹出层

vant 自定义弹框

文章图片

使用vant制作弹框，具体如下：
html层

{{ item.title }}{{ p }}

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 弹框和弹出层今天发现一个关于vant 弹框和弹出层的一个样式问题
一旦父节点用上transform:translate(); 或者用animation: mt 1s both; 中mt 里面定义了transform:translate()后,子节点 van-dialog和van-popup 上下定位出问题的. 注意了!