ElementUI离线使用-分页功能

Element离线使用 -分页功能

引入element后，由于网络速度较慢，发现页面运行起来，比较卡顿，于是将其下载到本地

1.下载静态资源

element-ui 官网 ：http://element-cn.eleme.io/#/zh-CN/component/installation

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<script src="https://unpkg.com/element-ui/lib/index.js">script>

复制网址https://unpkg.com/element-ui/lib/theme-chalk/index.css, 浏览器打开，您会看到密密麻麻的css代码

先Ctrl + A ,然后Ctrl + C，新建一个文件，命名为element-index.css（命名随意）

js 如法炮制（命名随意）

2.页面引入

将下载好的文件引入到自己的项目

页面引入

<link rel="stylesheet" type="text/css" href="js/vue/element-ui/element-ui.css">
<script  src="js/vue/element-ui/element-ui.js"  >script>

注意：由于element-ui是基于vue的所以再引入ui之前，一定要先引入一下Vue的js文件

3.以分页为例

<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
el-pagination>

引入分页组件，methods方法
效果如下

4.解决图标不显示问题

大家可以看到，样式已经来了，但是为什么没有图标呢，经过一番打探，原来ui的图标是一个二进制的文件，我们打开刚才下载的js 和css

css 查找

得到两个路径 分别复制

https://unpkg.com/element-ui/lib/theme-chalk/fonts/element-icons.woff

https://unpkg.com/element-ui/lib/theme-chalk/fonts/element-icons.ttf

将上述路径放到浏览器地址栏敲一下回车，下载这两个文件

将这两个文件放到一个fonts 文件夹中

完整文件目录

注意：一定要按照这种格式存放 ，文件引入路径在css中已经确定

刷新页面

这样就可以愉快的撸代码了