Vue实现PopupWindow组件详解


Posted in Javascript onApril 28, 2018

这段时间一直在学习前端技术来完成自己的小项目。在js方面就使用了Vue框架。由于在项目里想实现一个新建地址的PopupWindow效果,便想到可以使用Vue的一些特性来实现。

用到的Vue特性:组件(Component),props传值,slot内容插入,transitions过渡动画,x-templete模板。

直接上代码(完整代码可在链接中下载popupwindow):

html代码(无样式):

<div id="address-choose">
 <div>
 <button @click="showOneBtnWindow()">显示</button>
 </div>
 <new-address-window 
  v-show="isShowEditWindow" 
  @close="removeEditWindow()" 
  :addressregion="addressRegion">
  <!--使用插槽显示不同的title-->
  <p slot="edit-window-title">
  {{editTitle}}
  </p>
  <div slot="popup-btn-container">
  <button>保存</button> 
  <button>删除</button>
 </div>
 </new-address-window>
 </div>
<!--新建地址popupwindow模板-->
<script type="text/x-template" id="popup-window-address-new">
 <transition name="popup-window-transition">
 <div>
 <slot name="edit-window-title">
 <p>新建收货地址</p>
 </slot> 
 </div>
 <div>
 <p>收货人</p>
 <input type="text" :value="addressregion.name"/>
 </div>
 <div>
 <p>选择地区</p>
 <ul>
 <li>{{addressregion.province}}</li>
 <li>{{addressregion.city}}</li>
 <li>{{addressregion.region}}</li>
 </ul>
 </div>
 <div>
 <p>联系电话</p>
 <input type="text" placeholder="手机号"/>
 </div>
 <div>
 <p>详细地址</p>
 <input type="text" placeholder="如街道、楼层、门牌号等"/>
 </div>
 <div>
 <p>邮政编码</p>
 <input type="text" placeholder="邮政编码(选填)"/>
 </div>
 <div>
 <slot name="popup-btn-container">
 <button class="btn btn-success">保存</button>
 <button class="btn btn-danger">删除</button>
 </slot>
 </div>
 </div>
 </transition>
</script>

js代码:

/*
 * 新建与编辑地址Vue组件popupwindow
 * */
var newAddressWindow = Vue.component("new-address-window",{
 props: ['addressregion'],
 template: "#popup-window-address-new"
})

/*
 * 地址popupwindow的Vue实例
 * */
var chooseAddress = new Vue({
 el: "#address-choose",
 data: {
 isShowEditWindow: true,
 isOneButton: false,
 editTitle: "新建收货地址",
 //填入初始地址信息,组件与改数据绑定
 addressRegion: {
 }
 },
 methods: {
 showOneBtnWindow: function(){ //显示新建收货地址对话框(有一个按钮)
 this.isShowEditWindow = true;
 this.isOneButton = false;
 this.editTitle = "新建收货地址";
 },
 removeEditWindow: function(){ //关闭新建与编辑地址选择对话框
 this.isShowEditWindow = false;
 }
 }
})

至此,一个popupwindow的组件就完成了。在实现一个Vue组件时,可以使用模板来实现组件,我这里采用了x-templete模板实现了组件,同时在组件通也可以使用vue的transition特性加入一些动画效果。

Vue实现PopupWindow组件详解

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

Javascript 相关文章推荐
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
小程序图片长按识别功能的实现方法
Aug 30 Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 Javascript
JS实现的雪花飘落特效示例
Dec 03 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 Javascript
详解angular路由高亮之RouterLinkActive
Apr 28 #Javascript
vue弹窗组件使用方法
Apr 28 #Javascript
学习Vue组件实例
Apr 28 #Javascript
vue弹窗消息组件的使用方法
Sep 24 #Javascript
layui实现动态和静态分页
Apr 28 #Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 #Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 #Javascript
You might like
基于php 随机数的深入理解
2013/06/05 PHP
PHP生成随机密码类分享
2014/06/25 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
通过实践编写优雅的JavaScript代码
2019/05/30 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
python实现数通设备端口监控示例
2014/04/02 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
python画双y轴图像的示例代码
2019/07/07 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
Python hashlib模块加密过程解析
2019/11/05 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
html5的新增的标签和废除的标签简要概述
2013/02/20 HTML / CSS
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
政法大学毕业生自荐信范文
2014/01/01 职场文书
2015年团支部工作总结
2015/04/03 职场文书
预备党员群众意见
2015/06/01 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers