精华内容
下载资源
问答
  • element-ui 本地化使用教程

    万次阅读 2019-10-26 10:22:58
    element-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);
            }
        }
    }
    
    
    展开全文
  • 在使用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:09
    element elementui element-ui Element  Element-UI 官网 echarts Echarts.js
    展开全文
  • element-ui

    千次阅读 2019-06-03 03:04:16
    安装 npm i element-ui 这三句不能少

    安装 npm i element-ui
    在这里插入图片描述
    这三句不能少
    在这里插入图片描述

    分页组件Pagination

    在这里插入图片描述

    展开全文
  • 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(不是Vue项目整合Element-UI,Vue项目整合Element-UI不久就会有的,因为最近博主有一个...
  • npm 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 什么是Element-ui? 根据官网的说法,Element-ui,是一套为开发者、设计师和产品经理准备的基于Vue 2.0的由饿了么公司出品的桌面端组件库。 官网:https://element.eleme.cn/#/zh-CN 如何使用? 1、...
  • 有项目需要使用VUE+element-ui做一个前端项目,从网上找了一个Demo修改后发现很多element-ui的图标是用不了,后来发现是因为element-ui的版本太低导致很多图标不支持,升级element-ui的版本后项目运行出错,最后查...
  • 在VUE-CLI 3下的第一个Element-ui项目(菜鸟专用) 上面这个链接是vue-cli3.0安装element-ui的详细过程,如果想要按需引用看下面的 1.引入vue add element How do you want to import Element? --&gt;选择 ...
  • ERROR 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 ...
  • 在默认设置里,采用的是英文。 将src/main.js里的 import locale from 'element-ui/lib/locale/lang/en 改成 import locale from 'element-ui/lib/locale/lang/zh-CN' 就可以了
  • 报错信息: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 ...
  • elementUI: 如何使用 官网:... 安装 element-ui npm i element-ui -D npm install element-ui --save-dev // i -&gt; install // D -&gt; --save-dev // S -&gt; --save2. 引入 ...
  • 突然发现已经半年没更新的element-ui更新了 更新了什么还不清楚,但是告知了基于vue3.x版本的 element-plus 已经出来了。 先来上手体验一下 首先安装一个最新的@vue-cli,搭建一个vue3.x的项目,脚手架创建流程...
  • 报错信息 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 组价,导入element-ui 组件 vue 项目安装(cnpm install),项目执行(cnpm run dev), 提示如下错误信息: This dependency was not found: * element-ui/lib/theme-default/index....
  • 在腾讯云centos7上用Django+vue+element-ui搭建项目,按照网上资料下载了 npm i element-ui -S 也向webpack.base.conf.js 和 main.js中添加了代码, 且逻辑没有问题,页面可以正常那个访问且不报错,但样式就是不...
  • 一、版本说明,没有的需要安装 ..."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+element-ui,但是发现element-ui的样式修改不了的问题,最后发现是因为我在样式上加了scoped这个属性,一个局部作用域的问题 当加了scoped的时候代表这段样式代码只在这个组件内有效,...
  • 使用Vue.js和Element-UI做一个简单的登录页面
  • element-ui/vue-element-admin导出excel文件

    千次阅读 2019-11-06 17:26:31
    element-ui/vue-element-admin导出excel文件,我试了好多办法,这个是我发现最简单的,和大家分享一下下
  • Element-Ui组件(二)Icon 图标

    万次阅读 多人点赞 2019-06-03 16:16:39
    Element-Ui组件(二)图标应用 本文参考Element官方文档: http://element-cn.eleme.io/#/zh-CN/component 基本用法 Element内置丰富的图标库,主要有以下2种用法: 设置类名el-icon-xxx,通常使用i元素 在...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,790
精华内容 13,116
关键字:

element-ui