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 相关文章推荐
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
javaScript实现游戏倒计时功能
Nov 17 Javascript
7个好用的JavaScript技巧分享(译)
May 07 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
WEB前端性能优化的7大手段详解
Feb 04 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异步多线程swoole用法实例
2014/11/14 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
jQuery获取浏览器类型和版本号的方法
2016/07/05 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
python实现七段数码管和倒计时效果
2019/11/23 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
介绍一下linux的文件系统
2012/03/20 面试题
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
养殖人员的创业计划书范文
2013/12/26 职场文书
父亲八十大寿答谢词
2014/01/23 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
农村党员对照检查材料
2014/09/24 职场文书
房屋转让协议书
2014/10/18 职场文书
迁户口计划生育证明
2014/10/19 职场文书
毕业实习感受与体会
2015/05/26 职场文书
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电