uniapp 自定义弹框

实现：通过v-if（v-show）控制弹窗的显示与隐藏

界面代码

<template><view class="coupon-wrapper"><text class="coupon-desc" @tap="viewVouponCode">点击查看券号</text><view class="coupon-voucher-code-popup" v-if="showVoucherCode"><view class="popup-wrapper"><view class="popup-content"><view class="popup-content-wrapper">{{coupon.voucherCode}}</view><view class="popup-content-bottom-btns"><view class="btn-cancel" @tap="coucherCodeToast('close')">关闭</view><view class="btn-splitline"><text class="iconfont icon-anjianfengexian" /></view><view class="btn-copy" :class="'text-' + themeColor.name" @tap="coucherCodeToast('copy')"><text class="iconfont icon-fuzhi" />复制</view></view></view></view></view></view>
</template>

js代码

<script>
export default {data() {return {coupon: {},showVoucherCode: false};},methods: {//查询完整的券号viewVouponCode() {this.showVoucherCode = true;},//查看核销码的弹窗点击事件coucherCodeToast(flag) {this.showVoucherCode = false;if ('copy' === flag) {//TODO ...this.$mHelper.toast('券号已复制到剪切板');}}}
};
</script>

css代码

<style lang="scss">.coupon-voucher-code-popup {position: fixed;left: 0;right: 0;top: 0;height: 100vh;background-color: rgba(0, 0, 0, 0.6);z-index: 9998;.popup-wrapper {position: fixed;width: 550rpx;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: $font-base;padding: 40rpx;border-radius: 20rpx;background-color: #fff;z-index: 9999;.popup-content-wrapper {padding: 20rpx;}.popup-content-bottom-btns {display: flex;justify-content: space-evenly;padding: 20rpx;.btn-cancel, .btn-copy, .icon-anjianfengexian {font-size: $font-lg;}.btn-cancel, .icon-anjianfengexian {color: $font-color-light;}}}}
</style>

uniapp 自定义弹框相关推荐

uniapp自定义弹框
uniapp自定义弹框,适用所有类型效果原理创建一个vue页面 pages.json配置一般tabbar中间按钮点击出现弹框注意事项效果原理利用透明页面,点击进入当前页面,内容根据自己需求 ...
解决uni-app官方弹框popup关闭不了问题；/pages/extUI/popup/popup；uni-app弹框popup打开调用事件。unin-app弹框封装；
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210716165216781.png?x-oss-process=image/watermark,type_Zm ...
react离开页面，自定义弹框拦截，路由拦截
前言: 项目有个需求是:跳转路由,在离开页面前,需要弹框询问用户是否确定离开. 用react-router的<Prompt>组件是可以的,但是,怎么使用antd组件(或者说自定义组件)呢? ...
自定义弹框一（PopupWindow实现）响应两种点击事件
自定义弹框通常可以使用自定义的popupwindow,自定义的activity,自定义的dialog来实现这里先用popupwindow来实现并且可以在弹框上实现点击事件或者在其所依附的ac ...
android 系统弹框与自定义弹框
1. 系统弹框 private AlertDialog alertDialog; private void tipDialog(String value) { if (alertDia ...
element-ui 自定义弹框，加入图片
element 组件库里面有弹框组件. 实际项目中需要用到弹框.需求是在弹框的div里面放入一张图片. 用到的是element弹框组件的最后一个.自定义弹框组件 const h = this.$cre ...
jq js 自定义弹框
自定义弹框 <body> <script type="text/javascript" src="./js/jquery-1.8.3.js"& ...
一个常用的自定义弹框封装(适配 AndroidX),加载 ProgressDialog,状态显示的 StatusDialog 和自定义 Toast,全部支持背景颜色,圆角,边框和文字的自定义,构建者模
MNProgressHUD 项目地址:maning0303/MNProgressHUD 简介: 一个常用的自定义弹框封装(适配 AndroidX),加载 ProgressDialog,状态显示的 S ...
抖音短视频系统开发自定义弹框
我们如果想要实现这样的自定义弹框,需要怎么做呢,接下来就是教程首先,我们需要创建一个类继承Dialog 下面就是代码 import android.annotation.SuppressLint; ...

uniapp 自定义弹框

uniapp 自定义弹框相关推荐

最新文章

热门文章