laypage在vue项目中的使用及动态加载

分页算是在网页中基本都要用到的组件了，很多开源的框架都有它自己的分页组件，像是Bootstrap中的分页组件，jQuery自己的分页组件等。但是如果要动态加载的话，可能用这些组件要写的比较麻烦，而我则在这里推荐一个layui框架里的laypage组件，它本身就自带很多参数，有利于动态加载，下面就来完整的介绍下怎么使用它以及我使用它时踩过的坑。

1. layui在vue项目中注入使用

   • layui本身也有npm的下载方式，但是由于它不能使用Vue.use()方法，而且我在网上查阅了好多资料也没有能把它整合到main.js里面，所以最后还是选择了在首页引入的方式。
   • 首先在layui官网中下载到layui的最新版本，值得一提的是在我写文章时layui还没有CDN链接，所以只能通过下载包的方式再在项目里引用。
   • 下载解压完成后，文档目录如下：
     
   • 将文件夹整个放入项目里，一定要整个文件夹放入项目在进行引用，不能单独引用文件，然后在首页引用下述两个文件

   	<link rel="stylesheet" 
   		  type="text/css" 
   		  href="./layui-v2.4.5/layui/css/layui.css"/>
   	<script src="./layui-v2.4.5/layui/layui.js" 
   			type="text/javascript" 
   			charset="utf-8"
   			></script>
   

   注意点：
   - 文件中还有个layui.all.js文件，引用它会产生一些BUG，除非你是采用非模块化方式，否则最好不要引用它。
   - 如果是在vue-cli 3的vue项目中，需要把layui文件夹放入public文件夹下才能生效，通过查资料加我自己理解，我认为是因为放在public下的不会被webpack进行处理，它们会直接被复制到最终的打包目录，和vue-cli 2下的static文件夹作用相同，而放在外面就会被webpack处理压缩，layui本身就是经过压缩的，所以会产生错误。

2. laypage的使用

   • laypage在vue中的基本用法
     layui本身就是以极简的调用方法自称的，说实话在用它们的过程中的确很方便，只需调用它的接口就可以得到你想要的效果，唯一不好的是它的html与css样式在代码中是隐藏的，不太利于自身学习，但是使用确实及其方便。下面直接上代码再进行说明：

   <template>
     <div id="page-test">
     </div>
   </template>
   
   <script>
   export default {
     name: 'PageTest',
   	mounted() {
   		var _this = this;
   		layui.use(['laypage', 'layer'], function() {
   			var laypage = layui.laypage,
   					layer = layui.layer;
   					
   			laypage.render({
   				elem: 'page-test', //选中元素
   				count: 80, //数据总数量
   				theme: '#1E9FFF' // 选中颜色样式
   			});
   		});
   	}
   
   }
   </script>
   
   <style scoped>
   
   </style>
   

   上面需要注意的只有一点，即this关键字，如果直接在layui.use里使用this的话指向的不会是vue组件里的this，而是layui里面的，所以需要在前面自定义一个变量来存储指针保证指代正确，这个主要是用于后面的动态加载使用。
   使用后的效果为：
   
   下面再附上laypage里的所有参数：

参数选项	说明	类型	默认值
elem	指向存放分页的容器，值可以是容器ID、DOM对象	String/Object	-
count	数据总数。一般通过服务端得到	Numbert	-
limit	每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。	Number	10
limits	每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框	Array	[10, 20, 30, 40, 50]
curr	当前页数（起始页数）	Number	1
groups	连续出现的页码个数	Number	5
prev	自定义“上一页”的内容，支持传入普通文本和HTML	String	上一页
next	自定义“下一页”的内容，同上	Stringt	下一页
first	自定义“首页”的内容，同上	String	1
last	自定义“尾页”的内容，同上	String	总页数值
layout	自定义排版。	Array	[‘prev’, ‘page’, ‘next’]
theme	自定义主题。支持传入：颜色值，或任意普通字符	String	-
hash	开启location.hash，并自定义 hash 值。	String/Boolean	false

关于基础使用是很简洁明了的，如果我说的还有不清晰的地方，可以到laypage官方文档进行查看。

2. laypage在vue中的动态加载
   在一开头也说了，laypage相比较bootstrap等框架的分页组件来说，最方便的就是它本身就提供了很多参数和借口来方便我们进行分页逻辑操作以及动态加载，但是这其中我也是踩了几个坑才使得功能实现。

   • 前面提到的this关键字的问题，因为要动态赋值以及获取当前页数来实现分页逻辑，所以一开始我直接在layui.use()方法里使用this关键字给我的组件内数据赋值时，总是获取不到值，就是因为this指针不对。
   • 理论上如果要动态赋值的话，只需要给laypage的count参数设置为服务器端获取的总数据条数即可，但就是这里会出现问题。如果你是将laypage直接写在mounted()钩子函数里的话，将axios写在外面，你会发现永远在初始页面获取不到数据总条数，原因就是因为axios是异步加载的，在页面加载时由于异步加载，在生成laypage插件时数据总数还没有从服务器获取到就已经加载出了laypage插件，这就导致了数据总条数的获取总是慢于分页插件的生成，而解决的方法就是讲laypage插件直接写进axios的数据处理部分，这样就解决了动态加载的问题。
   • laypage中jump函数的调用，jump是laypage自定义的切换分页的回调，当你点击分页的按钮时，jump函数返回两个参数，obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）。最重要的就是这个obj，这个obj包含了上面表格中的所有参数值，最重要的就是curr这个参数，这是获取当前页数，是写分页逻辑是最重要的参数。
     下面直接上代码：

   <template>
     <div id="page-test">
     </div>
   </template>
   
   <script>
   	import Qs from 'qs';
   	export default {
   	    name: 'PageTest',
   	    data() {
   		  return {
   			  user: {
   				  username: 'zhangsan',
   				  password: 123456
   			  },
   			  currPage: 1,
   			  url: ''
   		  }
   	    },
   		mounted() {
   			var _this = this;
   			this.axios
   					.post(url, Qs.stringify(this.user)) // 请求你需要的数据，放上自己的连接
   					.then(res => {
   						layui.use(['laypage', 'layer'], function() {
   							var laypage = layui.laypage,
   								layer = layui.layer;
   							laypage.render({
   								elem: 'page-test',
   								count: res.data.count, //根据你服务器端的数据获取数据总数
   								theme: '#1E9FFF',
   								jump: (obj, first) => {
   									_this.currPage = obj.curr; // 获取到当前页数,注意this关键字
   									this.business();
   								}
   							})
   						})
   					})
   		},
   		methods: {
   			business() {
   				// 在这里写下你的分页逻辑
   			}
   		}
   
   	}
   </script>
   
   <style scoped>
   
   </style>
   
   

以上就是laypage在vue项目中的使用，以及我自己在使用时踩到的一些坑，包括动态加载，指针问题等。欢迎指正与学习交流