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 相关文章推荐
由document.body和document.documentElement想到的
Apr 13 Javascript
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
vue里面父组件修改子组件样式的方法
Feb 03 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
Vue自定义全局弹窗组件操作
Aug 11 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
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
PHP的反射机制实例详解
2017/03/29 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
php-fpm中max_children的配置
2019/03/15 PHP
显示、隐藏密码
2006/07/01 Javascript
动态样式类封装JS代码
2009/09/02 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
replace()方法查找字符使用示例
2013/10/28 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
vue组件的写法汇总
2018/04/12 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
Python的面向对象思想分析
2015/01/14 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
python中import reload __import__的区别详解
2017/10/16 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
人力资源管理专业学生自我评价
2013/11/20 职场文书
小学家长评语大全
2014/04/16 职场文书
一帮一活动总结
2014/05/08 职场文书
平安建设工作方案
2014/06/02 职场文书
理财计划书
2014/08/14 职场文书
超市店庆活动方案
2014/08/31 职场文书
大学生毕业个人总结
2015/02/15 职场文书
六一儿童节致辞
2015/07/31 职场文书
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL