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+
    2024-04-02
  • Vue怎么自定义模态对话框弹窗
    这篇文章主要介绍“Vue怎么自定义模态对话框弹窗”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue怎么自定义模态对话框弹窗”文章能帮助大家解决问题。模态对话框弹窗效果:父组件(应用页面)主要代码:...
    99+
    2023-07-02
  • vue如何实现自定义模态弹窗组件
    本篇内容主要讲解“vue如何实现自定义模态弹窗组件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue如何实现自定义模态弹窗组件”吧! 一、创建弹窗组件 qu...
    99+
    2024-04-02
  • 微信小程序如何自定义模态对话框
    这篇文章给大家分享的是有关微信小程序如何自定义模态对话框的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进...
    99+
    2024-04-02
  • vue自定义气泡弹窗
    本文实例为大家分享了vue自定义气泡弹窗的具体代码,供大家参考,具体内容如下 src/components/myComponents/pop/pop.vue <templat...
    99+
    2024-04-02
  • 微信小程序如何自定义模态弹窗
    这篇文章将为大家详细讲解有关微信小程序如何自定义模态弹窗,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体内容如下api如下:示例:这样的模态弹窗,充其量只能做个aler...
    99+
    2024-04-02
  • vue实现自定义"模态弹窗"组件实例代码
    目录前言效果图实例代码总结前言 对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是设计出的图该怎么办呢 ,所以我们需要自己写一个对...
    99+
    2024-04-02
  • android如何自定义对话框
    这篇文章给大家分享的是有关android如何自定义对话框的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。实现效果  定义dialog.xml (res/layout/dialog.xml)<...
    99+
    2023-06-22
  • Android studio自定义对话框效果
    本文实例为大家分享了Android studio自定义对话框效果的具体代码,供大家参考,具体内容如下 实现步骤: 第一步:自定义.xml布局文件 <?xml ver...
    99+
    2024-04-02
  • Android中如何自定义对话框
    本文小编为大家详细介绍“Android中如何自定义对话框”,内容详细,步骤清晰,细节处理妥当,希望这篇“Android中如何自定义对话框”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。本文测试的harbor的版本是...
    99+
    2023-06-29
  • android自定义带箭头对话框
    本文实例为大家分享了android自定义带箭头对话框的具体代码,供大家参考,具体内容如下 import android.content.Context; import andr...
    99+
    2024-04-02
  • android自定义对话框实例代码
    1.实现效果    2.定义dialog.xml (res/layout/dialog.xml) <?xml version="1.0" encoding="utf...
    99+
    2024-04-02
  • vue定义模态框的方法
    本文实例为大家分享了vue定义模态框的具体代码,供大家参考,具体内容如下 <template> <transition name="slide"> &...
    99+
    2024-04-02
  • Android 自定义弹出菜单和对话框功能实例代码
    Android 开发当中,可能会存在许多自定义布局的需求,比如自定义弹出菜单(popupWindow),以及自定义对话框(Dialog)。话不多说,直接上图片。 先讲第一种,自定义PopUpWindow1.popupWindowp...
    99+
    2023-05-30
    android 弹出菜单 对话框
  • Android高德地图marker自定义弹框窗口
    本文实例为大家分享了Android高德地图marker自定义弹框窗口的具体代码,供大家参考,具体内容如下 最终效果: 1.gradle里添加高德地图依赖 implementat...
    99+
    2024-04-02
  • vue自定义弹框效果(确认框、提示框)
    本文实例为大家分享了vue自定义弹框效果的具体代码,供大家参考,具体内容如下 1、自定义确认框和提示框 根据传入的type来判断是确认框或提示框 <template>...
    99+
    2024-04-02
  • JQuery自定义模态框效果
    本文实例为大家分享了JQuery自定义模态框效果的具体代码,供大家参考,具体内容如下 重点:基于jQuery ,也可改造成原生模态框 功能: 1、可以自定义模态框的宽高等等一系列cs...
    99+
    2024-04-02
  • Android自定义对话框的简单实现
    本文实例为大家分享了Android自定义对话框的具体实现代码,供大家参考,具体内容如下 1、定义对话框的布局 <xml version="1.0" encoding="utf-...
    99+
    2024-04-02
  • 微信小程序如何实现自定义模态弹窗组件
    这篇文章主要介绍微信小程序如何实现自定义模态弹窗组件,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!小程序自带一个showModal弹窗,调用很简单,但是限制很多,title有字数限制...
    99+
    2024-04-02
  • Android自定义样式圆角dialog对话框
    本文实例为大家分享了Android创建自定义样式圆角dialog对话框的具体代码,供大家参考,具体内容如下 效果如上,圆角对话框,标题和正文都可以自己设定 做法: 1.在res文件...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作