iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue自定义模态对话框弹窗
  • 171
分享到

Vue自定义模态对话框弹窗

2024-04-02 19:04:59 171人浏览 泡泡鱼
摘要

本文实例为大家分享了Vue自定义模态对话框弹窗的具体代码,供大家参考,具体内容如下 模态对话框弹窗效果: 父组件(应用页面)主要代码: <template>     &

本文实例为大家分享了Vue自定义模态对话框弹窗的具体代码,供大家参考,具体内容如下

模态对话框弹窗效果:

父组件(应用页面)主要代码:

<template>
    <view class="app-container">
        <modal-dialog showText="确定要取消收藏吗?" :isshowDialog="isDialog" @cancel="isDialog = false" @confirm="confirmDelete"></modal-dialog>
    </view>
</template>
 
<script>
    import modalDialog from '@/components/modalDialog.vue';
    
    export default {
        components:{
            modalDialog
        },
        data() {
            return {
                isDialog: false,
            }
        },
        methods: {
            // 业务代码......
            this.isDialog = false;
        }
    }
</script>

子组件(自定义组件)代码:

<template>
    <view>
        <view class="global-mask" v-show="isShowDialog"></view>
        <view class="global-dialog" v-show="isShowDialog" style="top: 45%;">
            <view class="title">温馨提示</view>
            <view class="content">
                <view class="text">{{showText}}</view>
            </view>
            <view class="btn">
                <view class="left" @tap="cancel" v-if="isShowCancel">{{cancelText}}</view>
                <view class="right" @tap="confirm" v-if="isShowConfirm">{{confirmText}}</view>
            </view>
        </view>
    </view>
</template>
 
<script>
    export default {
        name: 'modalDialog',
        props: {
            showText: {
                type: String,
                default: '提示内容'
            },
            isShowDialog: {
                type: Boolean,
                default: false
            },
            isShowCancel: {
                type: Boolean,
                default: true
            },
            cancelText: {
                type: String,
                default: '取消'
            },
            isShowConfirm: {
                type: Boolean,
                default: true
            },
            confirmText: {
                type: String,
                default: '确定'
            }
        },
        data() {
            return {
                
            };
        },
        methods: {
            cancel() {
                this.$emit('cancel');
            },
            
            confirm() {
                this.$emit('confirm');
            }
        }
    }
</script>
 
<style lang="sCSS">
    .global-mask {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 998;
        width: 100%;
        height: 100%;
        background: rgba($color: #000000, $alpha: 0.3);
    }
    .global-dialog {
        position: fixed;
        top: 500rpx;
        left: 60rpx;
        top: 45%;
        z-index: 999;
        width: 630rpx;
        background: #FFFFFF;
        border-radius: 15rpx;
        overflow: hidden;
        .title {
            font-size: 36rpx;
            font-weight: 500;
            text-align: center;
            line-height: 100rpx;
            padding-bottom: 10rpx;
        }
        .content {
            .text {
                font-size: 32rpx;
                text-align: center;
                padding-bottom: 40rpx;
            }
            .fORM {
                padding: 0 40rpx;
                .item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 40rpx;
                    input {
                        width: 340rpx;
                        height: 60rpx;
                        border: 1px solid #eaeaea;
                        border-radius: 10rpx;
                        padding: 0 20rpx;
                    }
                }
            }
        }
        .btn {
            border-top: 1px solid #eaeaea;
            display: flex;
            &> view {
                flex: 1;
                text-align: center;
                line-height: 100rpx;
                font-size: 32rpx;
                &.left {
                    color: #666666;
                }
                &.right {
                    color: #FFFFFF;
                    background: #FF3F42;
                }
            }
        }
    }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: Vue自定义模态对话框弹窗

本文链接: https://www.lsjlt.com/news/153505.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue自定义模态对话框弹窗
    本文实例为大家分享了Vue自定义模态对话框弹窗的具体代码,供大家参考,具体内容如下 模态对话框弹窗效果: 父组件(应用页面)主要代码: <template>     &...
    99+
    2022-11-13
  • Vue怎么自定义模态对话框弹窗
    这篇文章主要介绍“Vue怎么自定义模态对话框弹窗”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue怎么自定义模态对话框弹窗”文章能帮助大家解决问题。模态对话框弹窗效果:父组件(应用页面)主要代码:...
    99+
    2023-07-02
  • vue如何实现自定义模态弹窗组件
    本篇内容主要讲解“vue如何实现自定义模态弹窗组件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue如何实现自定义模态弹窗组件”吧! 一、创建弹窗组件 qu...
    99+
    2022-10-19
  • vue自定义气泡弹窗
    本文实例为大家分享了vue自定义气泡弹窗的具体代码,供大家参考,具体内容如下 src/components/myComponents/pop/pop.vue <templat...
    99+
    2022-11-13
  • 微信小程序如何自定义模态对话框
    这篇文章给大家分享的是有关微信小程序如何自定义模态对话框的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进...
    99+
    2022-10-19
  • 微信小程序如何自定义模态弹窗
    这篇文章将为大家详细讲解有关微信小程序如何自定义模态弹窗,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体内容如下api如下:示例:这样的模态弹窗,充其量只能做个aler...
    99+
    2022-10-19
  • vue实现自定义"模态弹窗"组件实例代码
    目录前言效果图实例代码总结前言 对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是设计出的图该怎么办呢 ,所以我们需要自己写一个对...
    99+
    2022-11-12
  • android自定义AlertDialog对话框
    前面一篇文章//www.jb51.net/article/103036.htm介绍了alertDialog的四种简单使用,但是有些时候为了让整个app的风格统一,或者说前面的四...
    99+
    2022-06-06
    alertdialog Android
  • Android自定义对话框Dialog
    本文简单介绍自定义对话框Dialog的使用,代码和结构都非常简单,目的是能够快速使用自定义对话框,在本文中不具体讲解对话框的高级使用。 实现步骤 首先需要自己在我们的.xml文...
    99+
    2022-06-06
    dialog Android
  • Android 自定义对话框 showSetPwdDialog
    样式如下所示: 布局: layout   dialog_set_pwd.xml <?xml version="." encoding="utf-"&...
    99+
    2022-06-06
    自定义 Android
  • Android常用的AlertDialog对话框及自定义对话框
    常用的Dialog有确认对话框,单选按钮对话框,多选按钮对话框,复选按钮对话框另外还有自定义的对话框 AlertDialog的常用方法 setTitle:为对话框设置标题 se...
    99+
    2022-06-06
    自定义 alertdialog Android
  • Android自定义等待对话框
    最近,看了好多的APP的等待对话框,发现自己的太lower,于是就研究了一番,最后经过苦心努力,实现一个。 自定义一个LoadingIndicatorView(extend...
    99+
    2022-06-06
    Android
  • android如何自定义对话框
    这篇文章给大家分享的是有关android如何自定义对话框的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。实现效果  定义dialog.xml (res/layout/dialog.xml)<...
    99+
    2023-06-22
  • Android基础篇-对话框总结(普通对话框,单选对话框,多选对话框,自定义对话框)
    一:AlterDialog对话框 2:对话框圆角显示(在drawable下创建radiu...
    99+
    2022-06-06
    自定义 Android
  • android自定义带箭头对话框
    本文实例为大家分享了android自定义带箭头对话框的具体代码,供大家参考,具体内容如下 import android.content.Context; import andr...
    99+
    2022-11-11
  • Android studio自定义对话框效果
    本文实例为大家分享了Android studio自定义对话框效果的具体代码,供大家参考,具体内容如下 实现步骤: 第一步:自定义.xml布局文件 <?xml ver...
    99+
    2022-11-12
  • Android中如何自定义对话框
    本文小编为大家详细介绍“Android中如何自定义对话框”,内容详细,步骤清晰,细节处理妥当,希望这篇“Android中如何自定义对话框”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。本文测试的harbor的版本是...
    99+
    2023-06-29
  • Android高德地图marker自定义弹框窗口
    本文实例为大家分享了Android高德地图marker自定义弹框窗口的具体代码,供大家参考,具体内容如下 最终效果: 1.gradle里添加高德地图依赖 implementat...
    99+
    2022-11-12
  • Android 自定义弹出菜单和对话框功能实例代码
    Android 开发当中,可能会存在许多自定义布局的需求,比如自定义弹出菜单(popupWindow),以及自定义对话框(Dialog)。话不多说,直接上图片。 先讲第一种,自定义PopUpWindow1.popupWindowp...
    99+
    2023-05-30
    android 弹出菜单 对话框
  • Android对话框自定义标题 对话框标题美化操作
    Android自带的对话框标题不好看,如果我们需要给弹出的对话框设置一个自己定义的标题,可以使用AlertDialog.Builder的setCustomTitle()方法。&...
    99+
    2022-06-06
    自定义 Android
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作