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跨浏览器显示的file上传控件
Oct 24 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
bootstrap表单示例代码分享
May 18 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
Sep 28 Javascript
基于vue配置axios的方法步骤
Nov 09 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
this在vue和小程序中的使用详解
Jan 28 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 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/04/29 PHP
php下关于中英数字混排的字符串分割问题
2010/04/06 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
测试php函数的方法
2013/11/13 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
js下弹出窗口的变通
2007/04/18 Javascript
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
详解Python3.1版本带来的核心变化
2015/04/07 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
Python字符串对象实现原理详解
2019/07/01 Python
python开头的coding设置方法
2019/08/08 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
详解python tkinter 图片插入问题
2020/09/03 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
高一物理教学反思
2014/01/24 职场文书
如何写好优秀的创业计划书
2014/01/30 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
2015政治思想表现评语
2015/03/25 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书