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 相关文章推荐
使用TextRange获取输入框中光标的位置的代码
Mar 08 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
Angular开发实践之服务端渲染
Mar 29 Javascript
详解vue中使用protobuf踩坑记
May 07 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
一个图形显示IP的PHP程序代码
2007/10/19 PHP
深入apache host的配置详解
2013/06/09 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
php生成0~1随机小数的方法(必看)
2017/04/05 PHP
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
开源的javascript项目Kissy介绍
2014/11/28 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
寻找网站后台地址的python脚本
2014/09/01 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
台湾专柜女包:KINAZ
2019/12/26 全球购物
大学生创业计划书的用途
2014/01/08 职场文书
数学检讨书1000字
2014/02/24 职场文书
幼儿老师求职信
2014/06/30 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python
Django基础CBV装饰器和中间件
2022/03/22 Python