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 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
javascript编写简易计算器
May 06 Javascript
详解创建自定义的Angular Schematics
Jun 06 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
layui table 多行删除(id获取)的方法
Sep 12 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
Oct 13 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 Javascript
vue+spring boot实现校验码功能
May 27 Vue.js
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 base64+gzinflate压缩编码和解码代码
2008/10/03 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
jQuery动画animate方法使用介绍
2013/05/06 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
Javascript复制实例详解
2016/01/28 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
Python Django 命名空间模式的实现
2019/08/09 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
Python csv文件记录流程代码解析
2020/07/16 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
介绍Java的内部类
2012/10/27 面试题
婚礼证婚人演讲稿
2014/09/13 职场文书
党员检讨书
2014/10/13 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
圆明园观后感
2015/06/03 职场文书
超市店长竞聘书
2015/09/15 职场文书
学校教代会开幕词
2016/03/04 职场文书
教师师德承诺书2016
2016/03/25 职场文书
Mysql中 unique列插入重复值该怎么解决呢
2021/05/26 MySQL
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android