当前位置:网站首页>Simple and easy to modify spring frame components
Simple and easy to modify spring frame components
2022-07-07 10:44:00 【Weave_ network】
Use scenarios
Pop up components
Applicable framework vue, uniapp
Reuse uniapp Simple modification in the framework label And Unit of measure After usepx
Andrpx
<!-- vue -->
<template>
<div v-show="ishide" @touchmove.stop.prevent>
<!-- Mask -->
<div class="mask" :style="maskStyle"></div>
<!-- Content -->
<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: {
// Control the pop-up window ishide: {
type: Boolean, required: true }, // Set popup level zindex: {
type: Number, default: 99 }, // Set mask transparency opacity: {
type: Number, default: 0.6 }, // Set the width of the content area width: {
type: String, default: '70%' }, // Set the height of the content area height: {
type: String, default: '300px' }, // Set the content area fillet radius: {
type: String, default: '10px' }, // Set the bottom color of the content area bgcolor: {
type: String, default: '#FFFFFF' } }, computed: {
// Mask style maskStyle() {
return ` z-index:${
this.zindex}; background:rgba(0,0,0,${
this.opacity}); ` }, // Content style 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>
Components use
<template>
<div>
<!-- Switch control -->
<button type="default" @click="isshow=!isshow"> Popup </button>
<!-- Use components -->
<zwy-popup :ishide='isshow' width="70%" height="700rpx" radius="40rpx">
<!-- Custom display content -->
<div class="content">
<div class="image"></div>
<div class="title"> Activity title </div>
<div> Content </div>
<div> Content </div>
<div class="info"> Content </div>
<div class="btn"> Button </div>
</div>
<!-- Custom close button -->
<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>
边栏推荐
- Cluster task scheduling system lsf/sge/slurm/pbs based on HPC scenario
- 單調性約束與反單調性約束的區別 monotonicity and anti-monotonicity constraint
- 成为优秀的TS体操高手 之 TS 类型体操前置知识储备
- 555 circuit details
- BigDecimal value comparison
- IDA中常见快捷键
- CAS mechanism
- 555电路详解
- Elegant controller layer code
- What are the contents of the intermediate soft test, the software designer test, and the test outline?
猜你喜欢
When do you usually get grades in the soft exam? Online pedaling?
MySQL insert data create trigger fill UUID field value
What are the contents of the intermediate soft test, the software designer test, and the test outline?
Some superficial understanding of word2vec
基于HPC场景的集群任务调度系统LSF/SGE/Slurm/PBS
2022年上半年5月网络工程师试题及答案
Find the root of equation ax^2+bx+c=0 (C language)
IIC基本知识
I plan to take part in security work. How about information security engineers and how to prepare for the soft exam?
1321:【例6.3】删数问题(Noip1994)
随机推荐
关于easyflash v3.3使用过程的记录
555 circuit details
I plan to take part in security work. How about information security engineers and how to prepare for the soft exam?
BUUCTF---Reverse---reverse1
Talking about the return format in the log, encapsulation format handling, exception handling
BUUCTF---Reverse---reverse1
【OneNote】无法连接到网络,无法同步问题
[recommendation system 01] rechub
1323: [example 6.5] activity selection
Yarn的基础介绍以及job的提交流程
1321:【例6.3】删数问题(Noip1994)
How to successfully pass the senior system architecture designer in the second half of the year?
ThreadLocal会用可不够
施努卡:机器视觉定位技术 机器视觉定位原理
小程序跳转H5,配置业务域名经验教程
【推荐系统 01】Rechub
JS implementation chain call
在线硬核工具
The width of table is 4PX larger than that of tbody
Some online academic report websites and machine learning videos