使用vant 自定义弹框全过程

Alanni ·

更新时间:2024-11-14

· 1909 次阅读

vant 自定义弹框

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

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

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 自定义

1024 个赞