当前位置:网站首页>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>
边栏推荐
- JS实现链式调用
- 软考中级,软件设计师考试那些内容,考试大纲什么的?
- 深入理解Apache Hudi异步索引机制
- Schnuka: machine vision positioning technology machine vision positioning principle
- TypeScript 接口继承
- Using U2 net deep network to realize -- certificate photo generation program
- 施努卡:机器人视觉抓取工作原理 机器视觉抓取
- Mendeley--免费的文献管理工具,给论文自动插入参考文献
- 高级软考(网络规划设计师)该如何备考?
- 简单易修改的弹框组件
猜你喜欢
多线程-异步编排
Some superficial understanding of word2vec
简单易修改的弹框组件
What are the contents of the intermediate soft test, the software designer test, and the test outline?
Leetcode-560: subarray with sum K
成为优秀的TS体操高手 之 TS 类型体操前置知识储备
The difference between monotonicity constraint and anti monotonicity constraint
【推薦系統 01】Rechub
软考中级,软件设计师考试那些内容,考试大纲什么的?
【OneNote】无法连接到网络,无法同步问题
随机推荐
The width of table is 4PX larger than that of tbody
Installation and configuration of slurm resource management and job scheduling system
【推荐系统 01】Rechub
ArrayList线程不安全和解决方案
P1031 [noip2002 improvement group] average Solitaire
Monai version has been updated to 0.9. See what new functions it has
原型与原型链
[recommendation system 01] rechub
Applet jump to H5, configure business domain name experience tutorial
2022.7.3DAY595
P1223 queuing for water /1319: [example 6.1] queuing for water
JS implementation chain call
[牛客网刷题 Day5] JZ77 按之字形顺序打印二叉树
中级网络工程师是什么?主要是考什么,有什么用?
P1031 [NOIP2002 提高组] 均分纸牌
长列表性能优化方案 memo
单调性约束与反单调性约束的区别 monotonicity and anti-monotonicity constraint
2022年上半年5月网络工程师试题及答案
555电路详解
1323:【例6.5】活动选择