-
-
element-ui 本地化使用教程
2019-10-26 10:22:58element-ui 本地化使用 element-ui 下载脚本起因:
用 element-ui 时,本人是没有安装其它环境,而是直接用链接引入,这个带来的问题是,每次打开网页都很慢,于是想本地化,但是发现只是下载两个引入的 js 和 css 是不够的,很多功能会无法使用,打开 DevTools 发现是还有别的资源本地没有。
再次前往官网,找到下载页面,结果发现并没有给直接的下载链接。。没办法了,自己写个脚本来下载。最后成功离线化。
下载后在 html 中引入:
<!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">--> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>--> <script src="element-ui/lib/index.js"></script>
下载脚本:
临时起意做的,代码里面可能会有些瑕疵,但是不影响使用,本人已经成功下载并使用。
路径可以自己更改,注意不要从 Windows 资源管理器复制,Linux 系统当我没说。import java.io.File; import java.io.FileOutputStream; import java.io.InputStream; import java.net.HttpURLConnection; import java.net.URL; import java.nio.charset.StandardCharsets; import java.util.ArrayList; public class Main { static String fileP = "C:\\Users\\ChuanruiYan\\Desktop\\element-ui\\"; // 不要从资源管理器复制,有的字符会有问题,导致无法创建文件 static String urlP = "https://unpkg.com/browse/element-ui@2.13.2/"; static String urlF = "https://unpkg.com/element-ui@2.13.2/"; public static void main(String[] args){ try { GetPage(""); } catch (Exception e) { e.printStackTrace(); } } static void GetPage(String after) throws Exception { System.out.println(urlP + after); new File(fileP + after).mkdir(); HttpURLConnection http = (HttpURLConnection) (new URL(urlP + after)).openConnection(); http.setRequestMethod("GET"); http.setRequestProperty("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3562.0 Safari/537.36"); http.connect(); if(http.getResponseCode() == 200) { InputStream inputStream = http.getInputStream(); byte [] buffer = new byte[1024]; ArrayList<byte []> byteList = new ArrayList<>(); ArrayList<Integer> byteLength = new ArrayList<>(); int length; int totalLength = 0; while( (length = inputStream.read(buffer)) != -1 ) { byteList.add(buffer); byteLength.add(length); totalLength += length; buffer = new byte[1024]; } http.disconnect(); byte [] all; all = new byte[totalLength]; totalLength = 0; while(byteList.size() != 0) { System.arraycopy(byteList.get(0), 0, all, totalLength, byteLength.get(0)); totalLength += byteLength.get(0); byteList.remove(0); byteLength.remove(0); } String content = new String(all, StandardCharsets.UTF_8); all = null; content = content.split("tbody")[1]; String [] us = content.split("href=\""); for(int i = 1; i < us.length; i ++) { String href = us[i].split("\"", 2)[0]; if(href.equals("../")) { continue; } if(href.charAt(href.length() - 1) == '/') { GetPage(after + href); } else { if(!href.equals(".DS_Store")) GetFile(after + href); } } } else { GetPage(after); } } static void GetFile(String url) throws Exception{ System.out.println(url); HttpURLConnection http; http = (HttpURLConnection) (new URL(urlF + url)).openConnection(); http.setRequestMethod("GET"); http.setRequestProperty("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3562.0 Safari/537.36"); http.connect(); if(http.getResponseCode() == 200) { InputStream inputStream = http.getInputStream(); byte [] buffer = new byte[1024]; ArrayList<byte []> byteList = new ArrayList<>(); ArrayList<Integer> byteLength = new ArrayList<>(); int length; int totalLength = 0; while( (length = inputStream.read(buffer)) != -1 ) { byteList.add(buffer); byteLength.add(length); totalLength += length; buffer = new byte[1024]; } http.disconnect(); byte [] all; all = new byte[totalLength]; totalLength = 0; while(byteList.size() != 0) { System.arraycopy(byteList.get(0), 0, all, totalLength, byteLength.get(0)); totalLength += byteLength.get(0); byteList.remove(0); byteLength.remove(0); } File f = new File(fileP + url.replaceAll("/", "\\\\")); f.createNewFile(); FileOutputStream fos = new FileOutputStream(f, false); fos.write(all); fos.flush(); fos.close(); } else { GetFile(url); } } }
-
-
Element-ui之ElScrollBar组件滚动条的使用
2018-04-25 15:18:27在使用vue + element-ui 搭建后台管理页面的时候,做了一个头部、侧栏、面包屑固定的布局,导航栏和主要内容区域当内容超出时自动滚动。 使用的原因: 原来是采用优化浏览器样式的方式,对滚动条进行样式调整。...2021-1-6更新
针对评论出现的问题
1、noresize="false"
属性类型不符,加冒号绑定为动态属性:noresize="false"
。
2、代码不生效的问题,可能是没有设置高度导致,为<el-scrollbar />
设置高度。在使用
vue + element-ui
搭建后台管理页面的时候,做了一个头部、侧栏、面包屑固定的布局,导航栏和主要内容区域当内容超出时自动滚动。使用的原因:
原来是采用优化浏览器样式的方式,对滚动条进行样式调整。但这个方法并不兼容火狐浏览器,在火狐访问时依然是浏览器默认的滚动条样式。
.sidebar { position: fixed; border-right: 1px solid rgba(0,0,0,.07); overflow-y: auto; position: absolute; top: 0; bottom: 0; left: 0; transition: transform .25s ease-out; width: 300px; z-index: 3; } .sidebar::-webkit-scrollbar { width: 4px } .sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px } .sidebar:hover::-webkit-scrollbar-thumb { background: hsla(0,0%,53%,.4) } .sidebar:hover::-webkit-scrollbar-track { background: hsla(0,0%,53%,.1) }
灵感来源
在翻看
element-ui
官网的文档时,发现其左侧导航和右边的内容超出屏幕时,滚动条的样式比较小巧,通过浏览器审查工具查看,发现它是使用了el-scrollbar的样式,跟element-ui的组件样式命名一致。但文档中并没有关于这个 scrollbar组件的使用文档,搜索一番得知这是一个隐藏组件,官方在 github 的 issues 中表示不会写在文档中,需要用的自己看源码进行调用。最终实现效果
实现步骤
一、阅读源码
通过阅读源码,
scrollbar
组件暴露了native
,wrapStyle
,wrapClass
,viewClass
,viewStyle
,noresize
,tag
这7个 props属性props: { native: Boolean, // 是否使用本地,设为true则不会启用element-ui自定义的滚动条 wrapStyle: {}, // 包裹层自定义样式 wrapClass: {}, // 包裹层自定义样式类 viewClass: {}, // 可滚动部分自定义样式类 viewStyle: {}, // 可滚动部分自定义样式 noresize: Boolean, // 如果 container 尺寸不会发生变化,最好设置它可以优化性能 tag: { // 生成的标签类型,默认使用 `div`标签包裹 type: String, default: 'div' } }
二、在页面中使用 el-scrollbar组件
<template> <div> <el-scrollbar style="height: 200px;" :native="false" wrapStyle="" wrapClass="" viewClass="" viewStyle="" :noresize="false" tag="section"> <div> <p v-for="(item, index) in 200" :key="index">{{index}} 这里是一些文本。</p> </div> </el-scrollbar> </div> </template>
以上代码就是对
el-scrollbar
的使用了,属性不需要用的就不用写。源码
源码在
node_modules
目录下的element-ui/packages/scrollbar
模块入口index.js,从main导入 scrollbar并提供一个安装方法注册成全局组件
import Scrollbar from './src/main'; /* istanbul ignore next */ Scrollbar.install = function(Vue) { Vue.component(Scrollbar.name, Scrollbar); }; export default Scrollbar;
src/main.js 源码
// reference https://github.com/noeldelgado/gemini-scrollbar/blob/master/index.js import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'; import scrollbarWidth from 'element-ui/src/utils/scrollbar-width'; import { toObject } from 'element-ui/src/utils/util'; import Bar from './bar'; /* istanbul ignore next */ export default { name: 'ElScrollbar', components: { Bar }, props: { native: Boolean, wrapStyle: {}, wrapClass: {}, viewClass: {}, viewStyle: {}, noresize: Boolean, // 如果 container 尺寸不会发生变化,最好设置它可以优化性能 tag: { type: String, default: 'div' } }, data() { return { sizeWidth: '0', sizeHeight: '0', moveX: 0, moveY: 0 }; }, computed: { wrap() { return this.$refs.wrap; } }, render(h) { let gutter = scrollbarWidth(); let style = this.wrapStyle; if (gutter) { const gutterWith = `-${gutter}px`; const gutterStyle = `margin-bottom: ${gutterWith}; margin-right: ${gutterWith};`; if (Array.isArray(this.wrapStyle)) { style = toObject(this.wrapStyle); style.marginRight = style.marginBottom = gutterWith; } else if (typeof this.wrapStyle === 'string') { style += gutterStyle; } else { style = gutterStyle; } } const view = h(this.tag, { class: ['el-scrollbar__view', this.viewClass], style: this.viewStyle, ref: 'resize' }, this.$slots.default); const wrap = ( <div ref="wrap" style={ style } onScroll={ this.handleScroll } class={ [this.wrapClass, 'el-scrollbar__wrap', gutter ? '' : 'el-scrollbar__wrap--hidden-default'] }> { [view] } </div> ); let nodes; if (!this.native) { nodes = ([ wrap, <Bar move={ this.moveX } size={ this.sizeWidth }></Bar>, <Bar vertical move={ this.moveY } size={ this.sizeHeight }></Bar> ]); } else { nodes = ([ <div ref="wrap" class={ [this.wrapClass, 'el-scrollbar__wrap'] } style={ style }> { [view] } </div> ]); } return h('div', { class: 'el-scrollbar' }, nodes); }, methods: { handleScroll() { const wrap = this.wrap; this.moveY = ((wrap.scrollTop * 100) / wrap.clientHeight); this.moveX = ((wrap.scrollLeft * 100) / wrap.clientWidth); }, update() { let heightPercentage, widthPercentage; const wrap = this.wrap; if (!wrap) return; heightPercentage = (wrap.clientHeight * 100 / wrap.scrollHeight); widthPercentage = (wrap.clientWidth * 100 / wrap.scrollWidth); this.sizeHeight = (heightPercentage < 100) ? (heightPercentage + '%') : ''; this.sizeWidth = (widthPercentage < 100) ? (widthPercentage + '%') : ''; } }, mounted() { if (this.native) return; this.$nextTick(this.update); !this.noresize && addResizeListener(this.$refs.resize, this.update); }, beforeDestroy() { if (this.native) return; !this.noresize && removeResizeListener(this.$refs.resize, this.update); } };
-
element-ui Element Element-UI echarts
2018-10-29 09:26:09element elementui element-ui Element Element-UI 官网 echarts Echarts.js展开全文 -
element-ui
2019-06-03 03:04:16 -
vue vue-element-ui组件 layout布局系列学习(一)
2018-04-04 10:58:50本文仅供参考: 首先你要掌握的基础知识: row 行概念 <el-row></el-row> col列概念 <el-col></el-col> col组件的:span属性的布局调整,一共分为24栏: ...div class="g... -
Element-UI - Vue项目整合Element-UI & Icon图标 & 自定义Icon图标
2020-12-11 13:01:56博主很久之前就想使用Element-UI,总是因为学习后端的技术鸽了很久(博主目前是偏后端),这里博主通过Vue来整合Element-UI(不是Vue项目整合Element-UI,Vue项目整合Element-UI不久就会有的,因为最近博主有一个... -
vue导入element-ui并使用element-ui组件
2020-08-03 21:46:49npm install element-ui -S 2、在项目中导入,修改main.js /** 引入element ,必须有*/ import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI); -
Element-ui和vue-element-admin学习
2020-05-27 00:23:05Element-ui 什么是Element-ui? 根据官网的说法,Element-ui,是一套为开发者、设计师和产品经理准备的基于Vue 2.0的由饿了么公司出品的桌面端组件库。 官网:https://element.eleme.cn/#/zh-CN 如何使用? 1、... -
VUE+element-ui项目升级element-ui依赖版本后报错问题
2019-08-12 17:23:17有项目需要使用VUE+element-ui做一个前端项目,从网上找了一个Demo修改后发现很多element-ui的图标是用不了,后来发现是因为element-ui的版本太低导致很多图标不支持,升级element-ui的版本后项目运行出错,最后查... -
vue-cli3.0安装element-ui组件及按需引入element-ui组件
2019-01-08 21:21:23在VUE-CLI 3下的第一个Element-ui项目(菜鸟专用) 上面这个链接是vue-cli3.0安装element-ui的详细过程,如果想要按需引用看下面的 1.引入vue add element How do you want to import Element? -->选择 ... -
-
解决vue使用element-ui时,报xxx/element-ui/lib/theme-chalk/fonts/element-icons.ttf的问题
2020-06-10 02:15:40ERROR in ./node_modules/_element-ui@2.13.2@element-ui/lib/theme-chalk/fonts/element-icons.ttf Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file ... -
vue-element-admin里element-ui分页组件中英文显示切换
2020-09-29 13:36:31在默认设置里,采用的是英文。 将src/main.js里的 import locale from 'element-ui/lib/locale/lang/en 改成 import locale from 'element-ui/lib/locale/lang/zh-CN' 就可以了 -
vue 在使用element-ui时import 'element-ui/lib/theme-chalk/index.css‘时报错,新版本ElementUI
2020-04-01 18:23:29报错信息:in …/node_modules/_element-ui@2.13.0@element-ui/lib/theme-chalk/index.css 原代码: `import Vue from ‘vue’ import App from ‘./App.vue’ import router from ‘./router’ //引入element-ui ... -
element-ui -> pc端ui库 mint-ui -> 移动端ui库
2018-05-10 09:50:13elementUI: 如何使用 官网:... 安装 element-ui npm i element-ui -D npm install element-ui --save-dev // i -> install // D -> --save-dev // S -> --save2. 引入 ... -
element-plus 一个vue3.xUI框架 (element-ui的3.x 版初体验)
2020-11-04 13:17:05突然发现已经半年没更新的element-ui更新了 更新了什么还不清楚,但是告知了基于vue3.x版本的 element-plus 已经出来了。 先来上手体验一下 首先安装一个最新的@vue-cli,搭建一个vue3.x的项目,脚手架创建流程... -
vue报错:dependencies were not found: * element-ui in ./src/main.js * element-ui/lib/theme-chalk/...
2020-06-28 00:11:30报错信息 These dependencies were not found: * element-ui in ./src/main.js * element-ui/lib/theme-...2、输入 cnpm i element-ui -S(没有装淘宝镜像的使用 npm i element-ui -S) 再起项目,可以解决了 ... -
用Vue、element-ui、axios实现省市区三级联动
2018-03-13 11:33:17下面我就介绍一下前端开发者用vue,axios,element-ui开发一个省市区三级联动的组件。 1.准备工作,首先我们需要全中国的省市区资源的json数据(科普一下:前六位数字是身份证前六位) 2.搭建vue-cli,安装axios,... -
Vue 引入element-ui 组价,提示:import 'element-ui/lib/theme-default/index.css'
2019-06-26 10:28:45初始化Vue项目,安装element-ui 组价,导入element-ui 组件 vue 项目安装(cnpm install),项目执行(cnpm run dev), 提示如下错误信息: This dependency was not found: * element-ui/lib/theme-default/index.... -
使用Django+vue+element-ui搭建项目时,element-ui的样式不生效,如何解决?
2019-03-11 23:05:10在腾讯云centos7上用Django+vue+element-ui搭建项目,按照网上资料下载了 npm i element-ui -S 也向webpack.base.conf.js 和 main.js中添加了代码, 且逻辑没有问题,页面可以正常那个访问且不报错,但样式就是不... -
【报错问题】Vue element-ui 提示 ‘element-ui/lib/theme-chalk/index.css’ 找不到
2019-12-10 16:18:43一、版本说明,没有的需要安装 ..."element-ui": "^2.13.0", // npm install --save element-ui "vue": "^2.5.2", // npm install --save vue "vue-router": "^3.0.1", // npm install --save ... -
使用vue-cli+element-ui但是element-ui的样式修改不了
2019-05-15 10:28:31最近在开发使用了vue+element-ui,但是发现element-ui的样式修改不了的问题,最后发现是因为我在样式上加了scoped这个属性,一个局部作用域的问题 当加了scoped的时候代表这段样式代码只在这个组件内有效,... -
使用Vue.js和Element-UI做一个简单的登录页面
2017-06-22 10:02:50使用Vue.js和Element-UI做一个简单的登录页面 -
element-ui/vue-element-admin导出excel文件
2019-11-06 17:26:31element-ui/vue-element-admin导出excel文件,我试了好多办法,这个是我发现最简单的,和大家分享一下下 -
Element-Ui组件(二)Icon 图标
2019-06-03 16:16:39Element-Ui组件(二)图标应用 本文参考Element官方文档: http://element-cn.eleme.io/#/zh-CN/component 基本用法 Element内置丰富的图标库,主要有以下2种用法: 设置类名el-icon-xxx,通常使用i元素 在...
-
jsp017ssm网上书店系统
-
Spring Boot2.X仿朋友圈PC版系统实战_架构1.0
-
python学习TCP/UDP 踩坑
-
单元测试UnitTest+Pytest【Selenium3】
-
基于bs的企业考勤管理系统
-
基于51单片机的智能计算器.zip
-
易语言开发通达信DLL公式接口
-
mpi4py 基本函数学习
-
PTA C基础题目集
-
Kotlin协程极简入门与解密
-
第1章 Java入门基础及环境搭建【java编程进阶】
-
excel批量生成word.rar
-
LoRaMac-node-3.4.1.zip
-
citespace基本操作
-
微信支付2021系列之付款码支付一学就会java版
-
Qt项目实战之基于Redis的网络聊天室
-
Notes.docx
-
SQL Server 2016 高可用灾备技术合集
-
python面向对象——三大特性
-
找到最高海拔(周赛)