vue弹窗组件的实现示例代码


Posted in Javascript onSeptember 10, 2018

vue弹窗组件的样子

我们先看一下,我们要实现出来的弹窗组件长什么样子:

vue弹窗组件的实现示例代码vue弹窗组件的实现示例代码

呐,我们要用vue组件实现的弹窗就是这个样子,跟我们用js插件实现的效果一样,下面我们开始讲述怎么实现一个通用的vue弹窗组件。

实现vue弹窗组件需要的知识

是vue组件,当然最基础的是vue的知识,我假设大家是有一定vue功底的,然后你还需要了解:

1、vue的事件系统,vue组件间的单项数据流,props从父组件向子组件传递数据,子组件通过事件emit向父组件传递事件,父组件通过on监听子组件的事件来处理具体事务。

vue弹窗组件的实现示例代码

2、具名插槽slot,通过name属性来接收不同的父组件传递过来的内容,具名插槽接收两个数据,一是弹窗的标题,二是弹窗的显示内容。

vue弹窗组件的实现代码

vue弹窗的具体实现代码采用单页面组件的形式写的,具体代码如下:

<template>
  <div class='md-cont' v-show='showstate'>
    <div class='md-wrapper' >
      <div class='md-title'>
      <slot name='tlt' >
        标题
      </slot>
      </div>
      <div class='md-text'>
      <slot name='text' >
        这里是弹框内容
      </slot>
      </div>
      <div class='footer'>
        <div v-if='type=="confirm"' @click='tocancel' class='md-btn'>取消</div>
        <div class='md-btn' @click='took'>确定</div>
      </div>
    </div>
  </div>
</template>
<script>
export default{
  name:'modal',
  props:['type','showstate'],
  methods:{
    tocancel:function(){
      this.$emit('tocancel');
    },
    took:function(){
      this.$emit('took');
    }
  }
}
</script>
<style scoped>
.md-cont{position:fixed;left:0;right: 0;top:0;bottom: 0;
  z-index: 500;background:rgba(0,0,0,0.3);text-align:center;
  overflow: hidden;white-space:nowrap;}
.md-cont:after{content:"";display:inline-block;width:0;
height:100%;visibility: hidden;vertical-align:middle;}
.md-wrapper{display:inline-block;vertical-align:middle;
  background:#fff;color:#333333;font-size:0.34rem;
  padding-top:0.2rem;border-radius: 0.1rem;max-width:100%;}
.md-title{font-size:0.34rem;text-align:center;line-height:0.6rem;}
.md-text{font-size:0.25rem;text-align:center;line-height:0.4rem;padding:0.2rem 0.5rem;}
.footer{display:flex;border-top:0.01rem solid #E5E5E5;
  line-height:0.88rem;color:#488BF1;font-size:0.32rem;}
.md-btn{flex:1;}
.md-btn +.md-btn{border-left:0.01rem solid #E5E5E5;}
</style>

组件中模版代码很简单,其中主要的就是两个具名插槽slot;两个按钮触发两个事件,这两个事件通过$emit上传到父组件。根据父组件传递过来的type属性来决定是否显示取消按钮。

对于具名插槽和$emit事件系统不理解的可以去vue官网查看,这里不多做赘述了。

vue弹窗组件的使用

在父组件里面使用弹窗组件也是很方便的,如果你是bootstrap的使用者或者爱好者,你会对这种使用方式感到熟悉和亲切。

下面我展示使用代码:

<template>
<div>
  <div class='aft-box'>
      <div class='aft-flex aft-pd'>
        <div class='aft-btn' @click='alerts'>alert</div>
      </div>
      <div class='aft-flex aft-pd'>
        <div class='aft-btn aft-blue' @click='confirms'>confirm</div>
      </div>
  </div>
  <Modal type='alert' @took='okfall' :showstate='showa'>
      <span slot='tlt'>提示</span>
      <div slot='text'>我是一个alert提示弹窗</div>
  </Modal>
  <Modal type='confirm' @took='okfall2' @tocancel='cancelfall' :showstate='showc'>
      <span slot='tlt'>确认</span>
      <div slot='text'>{{msg}}</div>
  </Modal>
</div>
</template>
<script>
import Modal from './modal'
export default{
  name:'container',
  components:{
    Modal
  },
  data(){
    return {
      showa:false,
      showc:false,
      msg:"我有两个按钮,是confirm确认弹窗"
    }
  },
  methods:{
    alerts(){
      this.showa=true;
    },
    confirms(){
      this.showc=true;
      this.msg="我有两个按钮,是confirm确认弹窗";
    },
    okfall(){
      this.showa=false;
    },
    okfall2(){
      this.msg="点击了确认按钮,2秒后弹窗关闭";
      setTimeout(()=>{
        this.showc=false;
      },2000);
    },
    cancelfall(){
      this.showc=false;
    }
 
  }
}
</script>
<style>
.aft-box{display:flex;line-height:0.65rem;font-size:0.26rem;color:#333;padding:0.5rem 0;}
.aft-flex{flex:1;}
.aft-pd{padding:0.5rem 0.1rem;}
.aft-btn{display:block;line-height:0.88rem;text-align:Center;
  color:#fff;border-radius: 0.12rem;background:#FFB63B ;}
.aft-blue{background:#488BF1;}
</style>

这里我们需要先通过import引入modal弹窗组件,再在父组件里面通过components属性声明使用此组件。

然后在template模版中通过Modal标签使用弹窗组件;

在弹窗组件上通过type来设置弹窗的特性;

通过:showstate属性来标识弹窗的打开和关闭;

通过@took来设置确定按钮点击后的操作;

通过@tocancel来确定取消按钮点击后的操作;

在Modal标签中通过内容上的slot属性来标识内容是标题还是显示内容,slot='tlt'中的文字将会作为弹窗标题显示,slot='text'的文字将会作为弹窗的正文显示;

在这里你也可以通过{{msg}}插值表达式的形式来把内容和父组件的数据绑定到一块;

在script中我们通过data中的两个变量showa和showb来标识弹框的打开和关闭;

页面中的按钮事件中通过设置showa和showb的值来打开和关闭弹窗。

vue弹窗组件结语

这样一个vue弹窗组件就算完成了,使用简单灵活,哪里需要引入到里面就可以使用了,而且其中的内容和标题可以自由设置,而且vue弹窗组件相对于js弹窗插件来说实现起来更简单,更清晰。只是我们需要很好的掌握vue提供的特性以及能够按照vue所在的思想框架进行思考。而vue开中的重要思想就是:我们操作数据,页面变化dom操作交给vue来处理。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
继续学习javascript闭包
Dec 03 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
原生JavaScript实现轮播图
Jan 10 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 #Javascript
vue插件实现v-model功能
Sep 10 #Javascript
在Angular中使用JWT认证方法示例
Sep 10 #Javascript
详解vue-router传参的两种方式
Sep 10 #Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 #Javascript
webuploader分片上传的实现代码(前后端分离)
Sep 10 #Javascript
在Vue 中使用Typescript的示例代码
Sep 10 #Javascript
You might like
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
2016/10/08 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
TensorFlow实现模型评估
2018/09/07 Python
python每天定时运行某程序代码
2019/08/16 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
Python实现ATM系统
2020/02/17 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
4s客服专员岗位职责
2013/12/01 职场文书
企业管理毕业生求职信范文
2014/03/07 职场文书
财产保全担保书范文
2014/04/01 职场文书
库房保管员岗位职责
2014/04/07 职场文书
大一新生学期自我评价
2014/04/09 职场文书
美食节目策划方案
2014/05/31 职场文书
关爱留守儿童标语
2014/06/18 职场文书
尊师重教演讲稿
2014/09/04 职场文书
交警失职检讨书
2015/01/26 职场文书
社会实践心得体会范文
2016/01/14 职场文书
Python超详细分步解析随机漫步
2022/03/17 Python
Python测试框架pytest高阶用法全面详解
2022/06/01 Python