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 相关文章推荐
Document对象内容集合(比较全)
Sep 06 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
vue-resouce设置请求头的三种方法
Sep 12 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 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 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
PHP 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
PHP静态文件生成类实例
2014/11/29 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
基于jQuery实现返回顶部实例代码
2016/01/01 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
Python 除法小技巧
2008/09/06 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
python批量图片处理简单示例
2019/08/06 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
阿巴庭院:Abba Patio
2019/06/18 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
投资意向书范本
2014/04/01 职场文书
加入学生会自荐书
2015/03/05 职场文书
2016年员工年度考核评语
2015/12/02 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python