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中已经确定

刷新页面

在这里插入图片描述

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

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试

关闭