亲宝软件园·资讯

展开

vant自定义弹框

马优晨 人气:0

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。

加载全部内容

相关教程
猜你喜欢
用户评论