如何使用vant自定义弹框

本文小编为大家详细介绍“如何使用vant自定义弹框”，内容详细，步骤清晰，细节处理妥当，希望这篇“如何使用vant自定义弹框”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

vant 自定义弹框

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

html层

 <van-popup
     v-model="show"
     closeable
     class="dialog-test"
     close-icon="close"
     close-icon-position="top-right"
     :
   >
     <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 弹框和弹出层

今天发现一个关于vant 弹框和弹出层的一个样式问题

一旦父节点用上transform:translate(); 或者用animation: mt 1s both;中mt 里面定义了transform:translate()后,子节点 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> -->

读到这里，这篇“如何使用vant自定义弹框”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。