当前位置:网站首页>简单易修改的弹框组件
简单易修改的弹框组件
2022-07-07 08:30:00 【织_网】
使用场景
弹窗组件
适用框架 vue, uniapp
使用再uniapp 框架中可简单修改标签与尺寸单位后使用px
与rpx
<!-- vue -->
<template>
<div v-show="ishide" @touchmove.stop.prevent>
<!-- 遮罩 -->
<div class="mask" :style="maskStyle"></div>
<!-- 内容 -->
<div class="tip" :style="tipStyle">
<slot></slot>
</div>
</div>
</template>
<!-- uniapp -->
<!-- <template> <view v-show="ishide" @touchmove.stop.prevent> <view class="mask" :style="maskStyle"></view> <view class="tip" :style="tipStyle"> <slot></slot> </view> </view> </template> -->
<script> export default {
props: {
// 控制弹窗显隐 ishide: {
type: Boolean, required: true }, // 设置弹窗层级 zindex: {
type: Number, default: 99 }, // 设置遮罩透明度 opacity: {
type: Number, default: 0.6 }, // 设置内容区宽度 width: {
type: String, default: '70%' }, // 设置内容区高度 height: {
type: String, default: '300px' }, // 设置内容区圆角 radius: {
type: String, default: '10px' }, // 设置内容区底色 bgcolor: {
type: String, default: '#FFFFFF' } }, computed: {
// 遮罩样式 maskStyle() {
return ` z-index:${
this.zindex}; background:rgba(0,0,0,${
this.opacity}); ` }, // 内容样式 tipStyle() {
return ` width:${
this.width}; height:${
this.height}; z-index:${
this.zindex+1}; border-radius:${
this.radius}; background-color:${
this.bgcolor}; ` } } } </script>
<style scoped> .mask {
position: fixed; bottom: 0; right: 0; left: 0; top: 0; } .tip {
position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); } </style>
组件使用
<template>
<div>
<!-- 开关控制 -->
<button type="default" @click="isshow=!isshow">弹窗</button>
<!-- 使用组件 -->
<zwy-popup :ishide='isshow' width="70%" height="700rpx" radius="40rpx">
<!-- 自定义展示内容 -->
<div class="content">
<div class="image"></div>
<div class="title">活动标题</div>
<div>内容</div>
<div>内容</div>
<div class="info">内容</div>
<div class="btn">按钮</div>
</div>
<!-- 自定义关闭按钮 -->
<div class="close" @click="isshow=false">*</div>
</zwy-popup>
</div>
</template>
<script> export default {
data() {
return {
isshow: false } } } </script>
<style scoped> .content {
width: 100%; height: 100%; display: flex; align-items: center; flex-direction: column; justify-content: center; background-color: coral; border-radius: 10px; } .image {
width: 80px; height: 80px; border-radius: 50%; background: #4CD964; } .title {
font-size: 18px; margin: 30px 0 20px 0; } .info {
margin: 20px 0; font-size: 12px; text-align: center; background: #F5F5F5; border-radius: 8px; padding: 8px 10px; } .btn {
width: 100px; height: 30px; font-size: 12px; line-height: 30px; text-align: center; border-radius: 16px; background: linear-gradient(-90deg, #FEEF43, #E9D81B); } .close {
width: 30px; height: 30px; color: #FFFFFF; line-height: 30px; text-align: center; border-radius: 50%; border: 1px solid #FFFFFF; position: relative; bottom: -10%; left: 50%; transform: translate(-50%, -50%); } </style>
边栏推荐
猜你喜欢
Several schemes of building hardware communication technology of Internet of things
Smart city construction based on GIS 3D visualization technology
Leetcode-304: two dimensional area and retrieval - matrix immutable
优雅的 Controller 层代码
Socket通信原理和实践
1323:【例6.5】活动选择
基于HPC场景的集群任务调度系统LSF/SGE/Slurm/PBS
php \n 换行无法输出
软考中级,软件设计师考试那些内容,考试大纲什么的?
Summary of router development knowledge
随机推荐
[email protected]能帮助我们快速拿到日志对象
Leetcode-560: subarray with sum K
对word2vec的一些浅层理解
1321:【例6.3】删数问题(Noip1994)
Multisim -- software related skills
Use the fetch statement to obtain the repetition of the last row of cursor data
Factorial implementation of large integer classes
反射效率为什么低?
1324: [example 6.6] integer interval
使用Tansformer分割三维腹部多器官--UNETR实战
【作业】2022.7.6 写一个自己的cal函数
成为优秀的TS体操高手 之 TS 类型体操前置知识储备
CC2530 zigbee IAR8.10.1环境搭建
ArrayList线程不安全和解决方案
ThreadLocal is not enough
Some superficial understanding of word2vec
Serial communication relay Modbus communication host computer debugging software tool project development case
Using U2 net deep network to realize -- certificate photo generation program
CAS mechanism
2022.7.3DAY595