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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
javascript Ext JS 状态默认存储时间
Feb 15 Javascript
Jquery 绑定时间实现代码
May 03 Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
Javascript刷新页面的实例
Sep 23 Javascript
JS中Attr的用法详解
Oct 09 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 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时间戳使用实例代码
2008/06/07 PHP
关于crontab的使用详解
2013/06/24 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
多种方法实现JS动态添加事件
2013/11/01 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
JavaScript中的substr()方法使用详解
2015/06/06 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
详解Python pygame安装过程笔记
2017/06/05 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
django主动抛出403异常的方法详解
2019/01/04 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
pytorch 求网络模型参数实例
2019/12/30 Python
python计算导数并绘图的实例
2020/02/29 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
Java基础类库面试题
2013/09/04 面试题
进步之星获奖感言
2014/02/22 职场文书
医学专业应届生的自我评价
2014/02/28 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
结对共建协议书
2014/08/20 职场文书
运动会800米赞词
2015/07/22 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
详解vue身份认证管理和租户管理
2021/05/25 Vue.js