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 相关文章推荐
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 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
深入array multisort排序原理的详解
2013/06/18 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
如何让CI框架支持service层
2014/10/29 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
IE 下的只读 innerHTML
2009/08/21 Javascript
可以将word转成html的js代码
2010/04/11 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
微信小程序收藏功能的实现代码
2018/06/12 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
Python决策树分类算法学习
2017/12/22 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
某公司的.net工程师面试题笔试题
2013/11/22 面试题
车间主管岗位职责
2013/11/14 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书