vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法


Posted in Javascript onFebruary 22, 2017

上一篇文章介绍了vuejs实现的简单分页,如果我有几个页面都需要有分页效果,不可能每个页面都去复制一下这段代码吧,意思是封装一下,变成通用的组件。

首先使用基础 Vue 构造器,创建一个“子类”,Vue.extend( options )

var barHtml = '<div class="page-bar">'+
   '<ul>'+
   '<li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li>'+
   '<li v-if="cur==1"><a class="banclick">上一页</a></li>'+
   '<li v-for="index in indexs" v-bind:class="{ active: cur == index}">'+
    '<a v-on:click="btnclick(index)">{{ index }}</a>'+
   '</li>'+
   '<li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li>'+
   '<li v-if="cur == all"><a class="banclick">下一页</a></li>'+
   '<li><a>共<i>{{all}}</i>页</a></li>'+
   '</ul>'+
  '</div>';
 var navBar = Vue.extend({
 template:barHtml,
 props:['all','cur'],
 computed: {
  indexs: function(){
  var left = 1;
  var right = this.all;
  var ar = [];
  if(this.all>= 5){
  if(this.cur > 3 && this.cur < this.all-2){
   left = this.cur - 2
   right = this.cur + 2
  }else{
   if(this.cur<=3){
   left = 1
   right = 5
   }else{
   right = this.all
   left = this.all -4
   }
  }
  }
  while (left <= right){
  ar.push(left)
  left ++
  }
  return ar
  } 
 },
 methods: {
  btnclick: function(data){
  if(data != this.cur){
   this.cur = data;
   this.$emit('btn-click',data); 
  }
  },
  pageClick: function(){
  this.$emit('btn-click',this.cur);
  }
 }, 
 });
 window.pagenav = navBar;

这儿创建了一个全局的pagenav,可以在其它地方都可以调用。

html代码

<div id="page">
 <vue-nav :cur.sync="cur" :all.sync="all" v-on:btn-click="listenDate"></vue-nav>
 <p style="margin-left:40px;">{{msg}}</p>
</div>

css代码

.page-bar{
 margin:40px;
}
ul,li{
 margin: 0px;
 padding: 0px;
}
li{
 list-style: none
}
.page-bar ul{
 overflow: hidden;
}
.page-bar li{
 float: left;
}
.page-bar li:first-child>a {
 margin-left: 0px
}
.page-bar a{
 display: block;
 border: 1px solid #ddd;
 text-decoration: none;
 position: relative;
 padding: 6px 12px;
 margin-left: -1px;
 line-height: 1.42857143;
 color: #337ab7;
 cursor: pointer
}
.page-bar a:hover{
 background-color: #eee;
}
.page-bar a.banclick{
 cursor:not-allowed;
}
.page-bar .active a{
 color: #fff;
 cursor: default;
 background-color: #337ab7;
 border-color: #337ab7;
}
.page-bar i{
 font-style:normal;
 color: #d44950;
 margin: 0px 4px;
 font-size: 12px;
}

新建一个vue对象实例

var pageBar = new Vue({
 el: '#page',
 data: {
  all: 8, //总页数
  cur: 1,//当前页码
  msg:''
 },
 components:{
  'vue-nav':pagenav
 },
 watch: {
  cur: function(oldValue , newValue){
  console.log('监听cur前与后的值:');
  console.log(arguments);
  }
 }, 
 methods:{
  listenDate:function(data){
  this.cur = data;
  this.msg = '你点击了'+data+ '页';
  }
 }
 })

简单的用js封装了一下分页组件。

实现效果

vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta charset="utf-8">
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="js/vue.min2.js"></script>
<style>
.page-bar{
 margin:40px;
}
ul,li{
 margin: 0px;
 padding: 0px;
}
li{
 list-style: none
}
.page-bar ul{
 overflow: hidden;
}
.page-bar li{
 float: left;
}
.page-bar li:first-child>a {
 margin-left: 0px
}
.page-bar a{
 display: block;
 border: 1px solid #ddd;
 text-decoration: none;
 position: relative;
 padding: 6px 12px;
 margin-left: -1px;
 line-height: 1.42857143;
 color: #337ab7;
 cursor: pointer
}
.page-bar a:hover{
 background-color: #eee;
}
.page-bar a.banclick{
 cursor:not-allowed;
}
.page-bar .active a{
 color: #fff;
 cursor: default;
 background-color: #337ab7;
 border-color: #337ab7;
}
.page-bar i{
 font-style:normal;
 color: #d44950;
 margin: 0px 4px;
 font-size: 12px;
}
</style>
</head>
<body>
<div id="page">
 <vue-nav :cur.sync="cur" :all.sync="all" v-on:btn-click="listenDate"></vue-nav>
 <p style="margin-left:40px;">{{msg}}</p>
</div>
<script type="text/javascript">
 var barHtml = '<div class="page-bar">'+
   '<ul>'+
   '<li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li>'+
   '<li v-if="cur==1"><a class="banclick">上一页</a></li>'+
   '<li v-for="index in indexs" v-bind:class="{ active: cur == index}">'+
    '<a v-on:click="btnclick(index)">{{ index }}</a>'+
   '</li>'+
   '<li v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a></li>'+
   '<li v-if="cur == all"><a class="banclick">下一页</a></li>'+
   '<li><a>共<i>{{all}}</i>页</a></li>'+
   '</ul>'+
  '</div>';
 var navBar = Vue.extend({
 template:barHtml,
 props:['all','cur'],
 computed: {
  indexs: function(){
  var left = 1;
  var right = this.all;
  var ar = [];
  if(this.all>= 5){
  if(this.cur > 3 && this.cur < this.all-2){
   left = this.cur - 2
   right = this.cur + 2
  }else{
   if(this.cur<=3){
   left = 1
   right = 5
   }else{
   right = this.all
   left = this.all -4
   }
  }
  }
  while (left <= right){
  ar.push(left)
  left ++
  }
  return ar
  } 
 },
 methods: {
  btnclick: function(data){
  if(data != this.cur){
   this.cur = data;
   this.$emit('btn-click',data); 
  }
  },
  pageClick: function(){
  this.$emit('btn-click',this.cur);
  }
 }, 
 });
 window.pagenav = navBar;
 var pageBar = new Vue({
 el: '#page',
 data: {
  all: 8, //总页数
  cur: 1,//当前页码
  msg:''
 },
 components:{
  'vue-nav':pagenav
 },
 watch: {
  cur: function(oldValue , newValue){
  console.log('监听cur前与后的值:');
  console.log(arguments);
  }
 }, 
 methods:{
  listenDate:function(data){
  this.cur = data;
  this.msg = '你点击了'+data+ '页';
  }
 }
 })
</script>
</body>
</html>

以上所述是小编给大家介绍的vuejs2.0实现分页组件使用$emit进行事件监听数据传递,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
深入理解Antd-Select组件的用法
Feb 25 Javascript
JS实现一个简单的日历
Feb 22 #Javascript
js实现日历与定时器
Feb 22 #Javascript
JS验证字符串功能
Feb 22 #Javascript
Bootstrap3 模态框使用实例
Feb 22 #Javascript
Bootstrap3下拉菜单的实现
Feb 22 #Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 #Javascript
js仿微博动态栏功能
Feb 22 #Javascript
You might like
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
2016/02/28 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
windows下python安装pip方法详解
2020/02/10 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
初中军训感想300字
2014/03/05 职场文书
鸿星尔克广告词
2014/03/21 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
2015年公司新年寄语
2014/12/08 职场文书
五好家庭申报材料
2014/12/20 职场文书
经理岗位职责范本
2015/04/15 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
借钱欠条怎么写
2015/07/03 职场文书
课改心得体会范文
2016/01/25 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书