element-ui

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...

本文仅供参考：

首先你要掌握的基础知识:

row 行概念

<el-row></el-row>

col 列概念

<el-col></el-col>

col组件的:span属性的布局调整,一共分为24栏:

代码示例:

<el-row>
  <el-col :span="24"><div class="grid-content"></div></el-col>
</el-row>           

效果展示:



代码示例：

<el-row>
  <el-col :span="12"><div class="grid-content"></div></el-col>
</el-row>

效果展示:



row组件的:gutter属性来调整布局之间的宽度---分栏间隔

代码示例:

<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

 

效果:



 

Col组件的:offset属性调整方块的偏移位置（每次1格/24格）

 

<el-row :gutter="20">
  <el-col :span="6" :offset="6"><div class="grid-content"></div></el-col>
  <el-col :span="6" :offset="6"><div class="grid-content"></div></el-col>
</el-row>

 

效果:



 

对齐方式:

row组件的type="flex"启动flex布局，再通过row组件的justify属性调整排版方式，属性值分别有:

 

justify=center 居中对齐
	justify=start 左对齐
	justify=end 右对齐
	justify=space-between 空格间距在中间对齐
	justify=space-around 左右各占半格空格对齐
 <el-row type="flex" class="row-bg" justify="center">
   <el-col :span="6"><div class="grid-content"></div></el-col>
 </el-row>




效果:



 

响应式布局:

参考bootstrap的响应式，预设四个尺寸

xs <768px
	sm ≥768px
	md ≥992
	lg ≥120
使用方式:

<el-row :gutter="10">
  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

 

练习示例:

 

        <span class="field-label">方块选择:</span>
        <!-- 选择屏幕框 -->
          <select v-model="selected" @change="selectbj(selected)">
            <option v-for="option in layouts" :value="option.value">
                {{ option.name }}
            </option>
          </select>

 

data默认初始化数据:

      selected: 0,
      layouts: [
        { 'name': '1x1模式', 'value': '0' },
        { 'name': '2x1模式', 'value': '1' },
        { 'name': '2x2模式', 'value': '2' },
        { 'name': '3x2模式', 'value': '3' },
        { 'name': '3x3模式', 'value': '4' },
        { 'name': '1+5模式', 'value': '5' }
      ],

 

布局代码:

    <el-main v-model="selected" >
      <div class="block" style="height:400px">
            <!-- {{selected}} -->
            <div style="height:100%;width:100%" v-if="selected==0">
            <!-- 1*1布局 -->
                <el-row :gutter="10" type="flex" class="grid-one-contentheight" justify="center">
                  <el-col :span="24"></el-col>
                </el-row>
            </div>
            <!-- 2*1布局 -->
            <div style="height:100%;width:100%" v-else-if="selected==1">
                <el-row :gutter="10" type="flex" class="row-bg el-row-two" justify="space-between">
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                </el-row>
            </div>
            <!-- 2*2 -->
            <div style="height:100%;width:100%" v-else-if="selected==2">
              <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                </el-row>
                <br>
                <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                </el-row>
            </div>
            <!-- 3*2布局 -->
            <div style="height:100%;width:100%" v-else-if="selected==3">
              <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                </el-row>
                <br>
                <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                </el-row>
            </div>
            <!-- 3*3模式 -->
            <div style="height:100%;width:100%" v-else-if="selected==4">
                <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                </el-row>
                <br>
                <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                </el-row>
                <br>
                <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                </el-row>
            </div>
            <!-- 模式 -->
            <div style="height:100%;width:100%" v-else>
               <el-row :gutter="10" type="flex" class="row-bg" justify="start">
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                </el-row>
                <br>
                <el-row :gutter="10" type="flex" class="row-bg" justify="start">
                    <el-col :span="8">
                      <div class="grid-a-contentWidth"></div>
                      <br>
                      <div class="grid-a-contentWidth"></div>
                      </el-col>
                    <el-col :span="16"><div class="grid-a-content-a-Width" ></div></el-col>
                </el-row>  
            </div>
          </div>
    </el-main>

 

样式(从里面对应取一下):

<style scoped>
  .box-card{
    width: 400px;
    margin: 20px auto;
  }
  .block{
    padding: 30px 24px;
    background-color: rgb(27, 16, 16);
  }
  .alert-item{
    margin-bottom: 10px;
  }
  .tag-item{
    margin-right: 15px;
  }
  .link-title{
    margin-left:35px;
  }
  .components-container {
		position: relative;
		height: 100vh;
	}

	.left-container {
		background-color: #F38181;
		height: 100%;
	}

	.right-container {
		background-color: #FCE38A;
		height: 200px;
	}

	.top-container {
		background-color: #FCE38A;
		width: 100%;
		height: 100%;
	}

	.bottom-container {
		width: 100%;
		background-color: #95E1D3;
		height: 100%;
	}

  .left-container-twoOne {
		background-color: rgb(110, 75, 75);
    height: 100%;
  }

  .container-onetoOne {
      background-color: rgb(47, 80, 74);
      height: 100%;
      width: 50%;
  }

  .container-onetoTwo {
      background-color: rgb(61, 19, 56);
      height: 100%;
      width: 50%;
  }

  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #57926b;
  }
  .bg-purple {
    background: #7e2970;
  }
  .bg-purple-light {
    background: #071c4d;
  }
  .grid-content {
    background-color: rgb(44, 143, 121);
    border-radius: 4px;
    min-height: 150px;
    min-width: 100px;
  }
  .grid-contentB {
    background-color: rgb(64, 56, 134);
    border-radius: 4px;
    min-height: 150px;
    min-width: 100px;
  }
  .grid-a-contentWidth {    
    background-color: rgb(44, 143, 121);
    border-radius: 4px;
    min-height: 100px;
  }
  .grid-a-content-a-Width {    
    background-color: rgb(44, 143, 121);
    border-radius: 4px;
    min-height: 220px;
  }

  .grid-one-contentheight {    
    background-color: rgb(44, 143, 121);
    border-radius: 4px;
    min-height: 100%;
  }

.el-row-two {
    margin-bottom: 80px;
    margin-top: 80px;
  
  }
</style>



效果:

收起

展开全文

布局

(精华)2020年10月19日 vue element-ui修改样式不生效
收起
javascript

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);
        }
    }
}

收起

展开全文

爬虫

element-ui Element Element-UI echarts
千次阅读 2018-10-29 09:26:09
element elementui element-ui Element Element-UI 官网 echarts Echarts.js
```
element

elementui

element-ui 

Element 

Element-UI 官网

echarts

Echarts.js
```
收起
展开全文
element echarts

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);
  }
};

收起

展开全文

scrollbar vue滚动条

(精华)2020年7月17日 vue element-ui实现弹窗拖拽
收起
javascript
element-ui
千次阅读 2019-06-03 03:04:16
安装 npm i element-ui 这三句不能少
收起
Element-UI - Vue项目整合Element-UI & Icon图标 & 自定义Icon图标
2020-12-11 13:01:56
博主很久之前就想使用Element-UI，总是因为学习后端的技术鸽了很久（博主目前是偏后端），这里博主通过Vue来整合Element-UI（不是Vue项目整合Element-UI，Vue项目整合Element-UI不久就会有的，因为最近博主有一个...
收起
javascript vue.js html 前端
vue导入element-ui并使用element-ui组件
2020-08-03 21:46:49
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和vue-element-admin学习
2020-05-27 00:23:05
Element-ui 什么是Element-ui？根据官网的说法，Element-ui，是一套为开发者、设计师和产品经理准备的基于Vue 2.0的由饿了么公司出品的桌面端组件库。官网：https://element.eleme.cn/#/zh-CN 如何使用？ 1、...
收起
vue npm es6
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 elementui
vue-element-admin搭配element-UI的使用
2020-04-30 17:19:01
论述vue-element-admin搭配element-UI的使用介绍地址拉取地址搭配element-UI使用更简便介绍地址项目运行地址项目地址 vue-element-admin文档本人基于vue-element-admin的二次开发拉取地址 #git拉取vue-...
收起
javascript vue.js
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? -->选择 ...
收起
vue3.0
一分钟带你体验html+vue+element-ui的丝滑
收起
html
解决vue使用element-ui时，报xxx/element-ui/lib/theme-chalk/fonts/element-icons.ttf的问题
千次阅读 2020-06-10 02:15:40
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 ...
收起
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 ...
收起
vue js
element-ui -> pc端ui库 mint-ui -> 移动端ui库
千次阅读 2018-05-10 09:50:13
elementUI: 如何使用官网:... 安装 element-ui npm i element-ui -D npm install element-ui --save-dev // i -> install // D -> --save-dev // S -> --save2. 引入 ...
收起
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
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中添加了代码，且逻辑没有问题，页面可以正常那个访问且不报错，但样式就是不...
收起
css django node.js python vue.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
element-ui的安装和使用，及在Vue项目中，查看当前正在使用的element-ui版本
2020-09-04 19:20:13
一、引入element-ui的两种方式第一种方式：使用npm命令行安装 npm i element-ui -S 第二种方式：CDN直接获取最新资源二、查看当前Vue项目的element的版本我是用idea创建的Vue项目，在pack.json的...
收起
vue
使用vue-cli+element-ui但是element-ui的样式修改不了
千次阅读 2019-05-15 10:28:31
最近在开发使用了vue+element-ui，但是发现element-ui的样式修改不了的问题，最后发现是因为我在样式上加了scoped这个属性，一个局部作用域的问题当加了scoped的时候代表这段样式代码只在这个组件内有效，...
收起
vue-cli
用Vue、element-ui、axios实现省市区三级联动
万次阅读 多人点赞 2018-03-13 11:33:17
下面我就介绍一下前端开发者用vue，axios，element-ui开发一个省市区三级联动的组件。 1.准备工作，首先我们需要全中国的省市区资源的json数据（科普一下：前六位数字是身份证前六位） 2.搭建vue-cli,安装axios,...
收起
三级联动 vue select
element-ui/vue-element-admin导出excel文件
千次阅读 2019-11-06 17:26:31
element-ui/vue-element-admin导出excel文件，我试了好多办法，这个是我发现最简单的，和大家分享一下下
收起

vue vue-element-ui组件 layout布局系列学习(一)

本文仅供参考：

首先你要掌握的基础知识:

(精华)2020年10月19日 vue element-ui修改样式不生效

element-ui 本地化使用教程

element-ui Element Element-UI echarts

Element-ui之ElScrollBar组件滚动条的使用

使用的原因：

灵感来源

最终实现效果

实现步骤

一、阅读源码

二、在页面中使用 el-scrollbar组件

源码

模块入口index.js，从main导入 scrollbar并提供一个安装方法注册成全局组件

src/main.js 源码

(精华)2020年7月17日 vue element-ui实现弹窗拖拽

Element-UI - Vue项目整合Element-UI & Icon图标 & 自定义Icon图标

vue导入element-ui并使用element-ui组件

Element-ui和vue-element-admin学习

element-plus 一个vue3.xUI框架 （element-ui的3.x 版初体验）

vue-element-admin搭配element-UI的使用

VUE+element-ui项目升级element-ui依赖版本后报错问题

vue-cli3.0安装element-ui组件及按需引入element-ui组件

一分钟带你体验html+vue+element-ui的丝滑

解决vue使用element-ui时，报xxx/element-ui/lib/theme-chalk/fonts/element-icons.ttf的问题

vue-element-admin里element-ui分页组件中英文显示切换

vue 在使用element-ui时import 'element-ui/lib/theme-chalk/index.css‘时报错，新版本ElementUI

element-ui -> pc端ui库 mint-ui -> 移动端ui库

vue报错：dependencies were not found: * element-ui in ./src/main.js * element-ui/lib/theme-chalk/...

Vue 引入element-ui 组价，提示：import 'element-ui/lib/theme-default/index.css'

使用Django+vue+element-ui搭建项目时，element-ui的样式不生效，如何解决？

【报错问题】Vue element-ui 提示 ‘element-ui/lib/theme-chalk/index.css’ 找不到

element-ui的安装和使用，及在Vue项目中，查看当前正在使用的element-ui版本

使用vue-cli+element-ui但是element-ui的样式修改不了

用Vue、element-ui、axios实现省市区三级联动

element-ui/vue-element-admin导出excel文件

element-ui

Linux &&UDP通信

基于python的dango框架购物商城毕业设计毕设源代码使用教程

idea git 删除错误提交

C++11 14 17 20 多线程从原理到线程池实战

2015年下半年 软件评测师 上午试卷 综合知识 软考真题【含答案和答案解析】

LeetCode 867. 转置矩阵

C++代码规范和Doxygen根据注释自动生成手册

Mockito 3.4.0 开始可 Mock 静态方法

iptables 企业级防火墙配置（四表五链）

Linux基础入门系列课程

Mysql数据库面试直通车

Python启蒙到架构师的核心技术精讲课程

spark大数据分析与实战

有赞容器化实践

区块链应用开发实战（Go语言方向）

量子差分密码分析

2018年上半年 信息系统管理工程师 上午试卷 综合知识 软考真题【含答案和答案解析】

2014年上半年 多媒体应用设计师 上午试卷 综合知识 软考真题【含答案和答案解析】

关于绝热演化的一般模型

FTP 文件传输服务

element-plus 一个vue3.xUI框架（element-ui的3.x 版初体验）

2015年下半年软件评测师上午试卷综合知识软考真题【含答案和答案解析】

2018年上半年信息系统管理工程师上午试卷综合知识软考真题【含答案和答案解析】

2014年上半年多媒体应用设计师上午试卷综合知识软考真题【含答案和答案解析】