精华内容
下载资源
问答
  • 主要为大家详细介绍了vue组件实现弹出框点击显示隐藏,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了使用vue实现各类弹出框组件,文中给大家提到了vue中常用的dialog组件的封装,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 如上图所示,这次要实现一个点击出现操作弹框的效果;并将这个功能封装成一个函数,便于在项目的多个地方使用。... 在点击出现弹出框的元素上把事件对象数据传递一下,以便获取点击时鼠标的数据,
  • 今天小编就为大家分享一篇vue点击input弹出带搜索键盘并监听该元素的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue实现点击按钮“查看详情”弹窗展示详情列表操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • View层 <template> <div> <div class="mask" v-if="showModal" @click="showModal=false"><...div class="pop" v-if="showModal">...button @click=...点击出现弹框</button> </d

    View层

    <template>
      <div>
        <div class="mask" v-if="showModal" @click="showModal=false"></div>
        <div class="pop" v-if="showModal">
            <button @click="showModal=false" class="btn">点击出现弹框</button>
        </div>
        <button @click="showModal=true" class="btn">点击出现弹框</button>
      </div>
    </template>
    

    数据层:

    <script>
    export default {
      data() {
        return {
          showModal: false
        };
      }
    };
    </script>
    

    样式层:

    <style scoped>
    .mask {
      background-color: #000;
      opacity: 0.3;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1
    }
    .pop {
      background-color: #fff;
     
      position: fixed;
      top: 100px;
      left: 300px;
      width: calc(100% - 600px);
      height:calc(100% - 200px);
      z-index: 2
    }
    .btn {
      background-color: #fff;
      border-radius: 4px;
      border: 1px solid blue;
      padding: 4px 12px;
    }
    </style>
    
    

    关键点:
    mask层的层级(z-index)要比弹出的pop的层级低。

    完整代码:

    <template>
      <div>
        <div class="mask" v-if="showModal" @click="showModal=false"></div>
        <div class="pop" v-if="showModal">
            <button @click="showModal=false" class="btn">点击出现弹框</button>
        </div>
        <button @click="showModal=true" class="btn">点击出现弹框</button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          showModal: false
        };
      }
    };
    </script>
    
    <style scoped>
    .mask {
      background-color: #000;
      opacity: 0.3;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1
    }
    .pop {
      background-color: #fff;
     
      position: fixed;
      top: 100px;
      left: 300px;
      width: calc(100% - 600px);
      height:calc(100% - 200px);
      z-index: 2
    }
    .btn {
      background-color: #fff;
      border-radius: 4px;
      border: 1px solid blue;
      padding: 4px 12px;
    }
    </style>
    
    展开全文
  • Vue.js弹出模态组件开发

    千次阅读 2017-07-26 20:09:17
    在开发项目的过程中,经常会需要开发一些弹出框效果,但原生的alert和confirm往往都无法满足项目的要求。这次在开发基于Vue.js的读书WebApp的时候总共有两处需要进行提示的地方,因为一开始就没有引入其他的组件库,...

    前言

    在开发项目的过程中,经常会需要开发一些弹出框效果,但原生的alert和confirm往往都无法满足项目的要求。这次在开发基于Vue.js的读书WebApp的时候总共有两处需要进行提示的地方,因为一开始就没有引入其他的组件库,现在只好自己写一个模态框组件了。目前只是一个仅满足当前项目需求的初始版本,因为这个项目比较简单,也就没有保留很多的扩展功能。这个组件还是有很多扩展空间的,可以增加更多的自定义内容和样式。这里只介绍如何去开发一个模态框组件,有需要进行更多扩展的,可以根据自己的需求自行开发。

    组件模板

    <template>
    <div class="dialog">
        <div class="mask"></div>
        <div class="dialog-content">
            <h3 class="title">{{ modal.title }}</h3>
            <p class="text">{{ modal.text }}</p>
            <div class="btn-group">
                <div class="btn" @click="cancel">{{ modal.cancelButtonText }}</div>
                <div class="btn" @click="submit">{{ modal.confirmButtonText }}</div>
            </div>
        </div>
    </div>
    </template>

    模态框结构分为:头部标题、提示内容和操作区域。同时一般还会有一个遮罩层。此次需求比较简单,也无需图标等内容,所以结构上写的也比较简单。实际开发中可根据需求对结构进行相应的调整。

    组件样式

    .dialog {
        position: relative;
    
        .dialog-content {
            position: fixed;
            box-sizing: border-box;
            padding: 20px;
            width: 80%;
            min-height: 140px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 5px;
            background: #fff;
            z-index: 50002;
            .title {
                font-size: 16px;
                font-weight: 600;
                line-height: 30px;
            }
            .text {
                font-size: 14px;
                line-height: 30px;
                color: #555;
            }
            .btn-group {
                display: flex;
                position: absolute;
                right: 0;
                bottom: 10px;
                .btn {
                    padding: 10px 20px;
                    font-size: 14px;
                    &:last-child {
                        color: #76D49B;
                    }
                }
            }
        }
        .mask {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 50001;
            background: rgba(0,0,0,.5);
        }
    }

    样式比较简单,就不多说了。

    组件接口

    export default {
        name: 'dialog',
        props: {
            dialogOption: Object
        },
        data() {
            return {
                resolve: '',
                reject: '',
                promise: '', // 保存promise对象
            }
        },
        computed: {
            modal: function() {
                let options = this.dialogOption;
                return {
                    title: options.title || '提示',
                    text: options.text,
                    cancelButtonText: options.cancelButtonText ? options.cancelButtonText : '取消',
                    confirmButtonText: options.confirmButtonText ? options.confirmButtonText : '确定',
                }
            }
        },
        methods: {
            //确定,将promise断定为完成态
            submit() {
                this.resolve('submit');
            },
            // 取消,将promise断定为reject状态
            cancel() {
                this.reject('cancel');
            },
            //显示confirm弹出,并创建promise对象,给父组件调用
            confirm() {
                this.promise = new Promise((resolve, reject) => {
                    this.resolve = resolve;
                    this.reject = reject;
                });
                return this.promise; //返回promise对象,给父级组件调用
            }
        }
    
    }

    在模态框组件中定义了三个方法,核心的方法是confirm,此方法是提供给父级组件调用的,返回一个promise对象。使用promise对象主要是为了异步调用,因为很多时候我们使用模态框时需要根据返回结果再进行下一步处理。

    扩展提示:

    如果需要扩展的话,可以通过propsdialogOption传递更多的字段,在computed中进行判断,比如增加一个字段isShowCancelButton可以控制取消按钮是否显示。其他扩展同理。

    调用

    
    <v-dialog v-show="showDialog" :dialog-option="dialogOption" ref="dialog"></v-dialog>
    
    this.showDialog = true;
    this.$refs.dialog.confirm().then(() => {
        this.showDialog = false;
        next();
    }).catch(() => {
        this.showDialog = false;
        next();
    })   

    源码地址

    Dialog组件源码

    实现效果

    图片描述图片描述

    展开全文
  • vue 简单的登录弹出框效果

    千次阅读 2020-10-23 21:15:46
    初学vue框架,小小的写了一个登录弹出框效果 各路大佬多多指教。 不多废话,直接上代码: CSS: *{margin:0;padding:0;} /*登陆按钮*/ #app{ width:140px; height:36px; margin:10px auto; } #login,#login a...

    初学vue框架,小小的写了一个登录弹出框效果

    各路大佬多多指教。

    不多废话,直接上代码:

    CSS:

    *{margin:0;padding:0;}
        /*登陆按钮*/
        #app{
            width:140px;
            height:36px;
            margin:10px auto;
        }
        #login,#login a{
            width: 200px;
            height: 38px;
            line-height:38px;
            text-align: center;
            text-decoration: none;
            font-size: 24px; 
            color: #000;
        }
    
        /*登陆框*/
        #login-box{
            padding: 20px;
            display:none;
            width:350px;
            height: 150px;
            background: #eeeeee;
            border-radius: 5px;
            position: absolute;
            margin-left: -80px;
            margin-top: 150px;
        }
        #login-box>form{
            text-align: center;
        }
        #login-box label{
            display: block;
            font-size: 20px;
            margin: 10px 0 0 0;
        }
        #login-box label input{
            width:200px;
            height: 30px;
        }
        #login-box button{
            width:200px;
            height: 30px;
            margin:10px 0 0 0;
            width:90px;
            border-radius: 5px;
        }
        #close{
            font-size:18px;
            position: absolute;
            top:0;
            right: 5px;
            cursor: pointer;
        }
        /*背景*/
        #back{
            position:absolute;
            left:0;
            top:0;
            width:100%;
            height:100%;
            background: #000;
            opacity: 0.5;
        }
    

    HTML:

    	<div id="app">
            <!--登陆按钮-->
            <h3 id="login" v-if="isLogin==true">欢迎您 | <a href="javascript:;" @click="logout">注销</a></h3>
            <h3 id="login" v-else><a href="javascript:;" @click="login1">登录</a> | 注册</h3>
    
            <!--登陆框 -->
            <div id="login-box" :style="log==0?'display:none':'display:block;zIndex:1'">
                <form action="">
                    <label>&nbsp;&nbsp;&nbsp;&nbsp;户:
                        <input v-model="uname" type="text" placeholder="请输入用户名...">
                    </label>
                    <label>&nbsp;&nbsp;&nbsp;&nbsp;码:
                        <input v-model="upwd" type="password" placeholder="请输入密码...">
                    </label>
                    <button type="button" @click="login2">登录</button>
                    <p id="close" @click="close">×</p>
                </form>
            </div>
            
            <!--背景半透明处理-->
            <div id="back" :style="log==0?'display:none':'display:block'"></div>
        </div>
    

    JS:

    new Vue({
        el:"#app",
        data:{
            isLogin:false,
            log:0,
            uname:"",
            upwd:""
        },
        methods:{
            login1(){
                this.log=1;
            },
            login2(){
                if(this.uname=="hahaha"&&this.upwd=="123456"){
                    this.log=0;
                    this.isLogin=true;
                }else{
                    alert("用户名或密码不正确!");
                }
            },
            close(){
                this.log=0;
                //清空input中的内容
                this.uname="";
                this.upwd="";
            },
            logout(){
                this.isLogin=false;
                this.uname="";
                this.upwd="";
            }
        }
    })
    

    效果图如下:
    界面
    弹出登录框
    登录成功

    正在学如何用vue与后台连接,所以本例中的用户名密码都是写死的,只是为了实现这个功能,进入实际运用还需改进。

    小小地感叹一下vue好方便。

    展开全文
  • vue模态弹窗动画 沃达尔 (Vodal) A Nice vue modal with animations. 带有动画的尼斯vue模态。 安装 npm i -S vodal ...点击弹出</button> <vodal :show="show" animation="rotate" @hide="show = fa

    vue模态框弹窗动画

    沃达尔 (Vodal)
    A Nice vue modal with animations.

    带有动画的尼斯vue模态。
    安装

    npm i -S vodal
    

    用法

    <template>
      <div class="home">
        <button @click="togglebox">点击弹出</button>
        <vodal :show="show" animation="rotate" @hide="show = false">
          <div>A vue modal with animations.</div>
        </vodal>
      </div>
    </template>
    
    <script>
    import Vodal from "vodal";
    export default {
      name: "name",
      components: {
        Vodal,
      },
      data() {
        return {
          show: false,
        };
      },
      methods: {
        togglebox: function () {
          this.show = true;
        },
      },
    };
    </script>
    <style lang="scss" scoped>
    // include animation styles
    @import "../../node_modules/vodal/common.css";
    @import "../../node_modules/vodal/rotate.css";
    </style>
    
    

    效果
    在这里插入图片描述

    道具 (Props )
    PropertyTypeDefaultDescription
    widthnumber400width of dialog
    heightnumber240height of dialog
    measurestringpxmeasure of width and height
    showboolfalsewhether to show dialog
    maskbooltruewhether to show mask
    closeButtonbooltruewhether to show close button
    closeOnEscboolfalsewhether close dialog when esc pressed
    closeOnClickMaskbooltruewhether close dialog when mask clicked
    animationstringzoomanimation type
    durationnumber300animation duration
    classNamestring/className for the container
    customStylesobject/custom dialog styles
    customMaskStylesobject/custom mask styles
    属性 类型 默认 描述
    宽度 400 对话宽度
    高度 240 对话高度
    测量 像素 宽度和高度的度量
    表演 布尔 是否显示对话框
    面具 布尔 真正 是否戴面具
    closeButton 布尔 真正 是否显示关闭按钮
    closeOnEsc 布尔 按下esc时是否关闭对话框
    closeOnClickMask 布尔 真正 单击蒙版时是否关闭对话框
    动画 放大 动画类型
    持续时间 300 动画时长
    班级名称 / 容器的className
    customStyles 目的 / 自定义对话框样式
    customMaskStyles 目的 / 自定义蒙版样式

    事件 (Event)

    NameDescription
    hidetriggers when dialog will hide
    clickMasktriggers when mask clicked
    名称 描述
    隐藏 对话框隐藏时触发
    clickMask 单击蒙版时触发

    动画类型 (Animation Types)

    • zoom

      放大

    • fade

      褪色

    • flip

      翻转

    • door

    • rotate

      旋转

    • slideUp

      向上滑动

    • slideDown

      滑下

    • slideLeft

      向左滑动

    • slideRight

      向右滑动

    展开全文
  • uni-app点击按钮弹出提示框

    万次阅读 2020-06-05 13:50:47
    uni-app点击按钮弹出提示框 点击事件 <view class="footerbotom_button" @click="ajp">立即支付</view> 示例: 为了方便大家使用,我单独将其拿出来。 ajp(){ uni.showModal({ title: '友情提示', ...
  • vue 组件弹出框点击显示隐藏

    万次阅读 2017-12-28 20:35:34
    由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v-show,但是在弹出框显示出来的时候,操作执行完后当前页面的更改按钮已经被弹出框覆盖了。所以只能在弹出...
  • 显示模态弹窗,可以只有一个确定按钮,也可以同时有确定和取消按钮。类似于一个API整合了 html 中:alert、confirm。 uni.showModal({ title: '提示', content: '这是一个模态弹窗', success: functi...
  • vue实现移动弹出框

    2020-09-11 15:22:04
    <template> <div> <div> <a-button type="primary" @click="showModal">Open Modal... } </style> 存在bug: 点击的时候会到鼠标点击的位置 解决方案:在左上定义个按钮/或者拖动的区域, 希望大佬给其他的解决方案!!!
  • vue+elementUI弹出确认和气泡确认

    千次阅读 2021-02-22 15:11:42
    官网确认地址 https://element.eleme.cn/#/zh-CN/component/popconfirm
  • hello你好我是辰兮很高兴能来阅读,本篇整理一下Vue+elementUI的弹出框相关用法,留给自己,也分享给初学者,一起进步! Vue+elementUI表格组件使用请参考:Vue+elementUI表格组件使用 本篇是Vue+elementUI的弹框...
  • 点击按钮出现提示框三秒,三秒后消失.prompt{ display: none; padding:20px; position: fixed; top: 40%; left:40%; border-radius:5px; background: rgba(0,0,0,0.4); z-index: 5000; color:#FFF;} &l...
  • Vue弹出框校验问题

    千次阅读 2019-05-05 20:17:39
    弹出的编辑进行校验,如果输入框不满足条件,点击“确定”按钮就会直接关闭此对话框。此时使用“footer”就可以解决这一问题。 <Modal v-model="showAddEdit1" title="添加/编辑 属性" @on-ok="btnokProperty...
  • if (this.checkedProjects.length === 0) { alert("该项不能为空"); }
  • Vue弹出框的优雅实践

    千次阅读 2020-12-18 22:53:46
    页面引用弹出框组件是经常碰见的需求,如果强行将弹出框组件放入到页面中,虽然功能上奏效但没有实现组件与页面间的解耦,非常不利于后期的维护和功能的扩展.下面举个例子来说明一下这种做法的弊端. <template> ...
  • <template> <div class="title">...点击按钮后会弹出消息,并且返回消息内容</h3> <br /> <h3>v-on:click="addone"</h3> <br /> <button v-on.
  • 之前我们分享过一些比较实用的jQuery/CSS3 Tooltip弹出框,大部分都是鼠标滑过链接文字或者按钮弹出一个提示层,比如这款jQuery Tooltip气泡提示框插件就拥有多种风格让你选择。这次我们要带来另外一款Tooltip用户...
  • 问题:重复点击按钮或多个请求同时报错时弹出多个提示框 解决办法:重写message,下一个弹框显示时关闭上一个弹框 message.js /**重置message,防止重复点击重复弹出message弹框 */ import { Message } from '...
  • vue中新增弹出对话框操作

    千次阅读 2020-05-16 15:40:03
    点击新增用户或者新增订单,弹出对话框页面进行信息输入操作 分析: 这个对话框组件是直接放到用户组件代码中的,自带一个属性,控制是否显示,默认为false不显示,需要显示的时候拿到此属性对应的变量,设置为...
  • vue写一个公用弹出框

    2019-02-20 13:29:00
    1.你可以在最外层的页面嵌入弹窗组件 2.然后控制它出来的变量存在vuex里 3.这个是弹窗组件 ...4.里面组件的显示根据存在vuex里的变量去改变 ...5.比如我要打开里面是ChartSetting的弹窗,就这样写 ...
  • VUE用layer实现弹出提示框

    千次阅读 2019-06-19 20:01:34
    效果图 步骤如下: 1.安装vue-layer npm install vue-layer 2.引入layer ...import layer from 'vue-layer' Vue.prototype.$layer = layer(Vue)...3.在页面中使用layer实现弹出提示框 html代码 <li class="...
  • 项目中使用element-ui时,message弹框功能是必须使用的,有时会在点击按钮提示无权限,或者请求报错时给适当提示: 但是重复点击按钮或者同一个页面多个请求同时报错时,就不美观了 可以看到,element-...
  • 1、先来看看vue怎么取消默认浏览器事件的 (1)vue取消冒泡事件 &lt;--! 将@click改为@click.stop即可 --&gt; &lt;p @click.stop="test($event)"&gt;测试&lt;/p&gt; (2)vue...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,851
精华内容 1,540
关键字:

vue点击按钮弹出提示框

vue 订阅