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 相关文章推荐
用JavaScript调用WebService的示例
Apr 07 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
javascript表单正则应用
Feb 04 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
javascript实现时钟动画
Dec 03 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动态规划解决0-1背包问题实例分析
2015/03/23 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
农历与西历对照
2006/09/06 Javascript
JS处理VBArray的函数使用说明
2008/05/11 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
js实现简单的秒表
2020/01/16 Javascript
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
简洁的十分钟Python入门教程
2015/04/03 Python
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
python 生成器需注意的小问题
2020/09/29 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
药学专业大学生自荐信
2013/09/28 职场文书
旷课检讨书2000字
2014/01/14 职场文书
社区庆八一活动方案
2014/02/02 职场文书
兵马俑导游词
2015/02/02 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
golang 在windows中设置环境变量的操作
2021/04/29 Golang