精华内容
下载资源
问答
  • Element UI 官网地址

    万次阅读 2018-09-30 10:16:39
  • Vue +Element UI 图片上传控件使用

    万次阅读 多人点赞 2018-07-11 16:34:12
    上一篇 Vue +Element UI +vue-quill-editor 富文本编辑器及插入图片自定义主要是写了富文本编辑器的自定义及编辑器中图片的上传并插入到编辑内容,这篇文章单独介绍一下element UI 图片上传控件的使用。首先要安装...

    上一篇 Vue +Element UI +vue-quill-editor 富文本编辑器及插入图片自定义 主要是写了富文本编辑器的自定义及编辑器中图片的上传并插入到编辑内容,这篇文章单独介绍一下element UI 图片上传控件的使用。首先要安装element并中引入,安装引入过程这里不再赘述。

    1.引用element 上传控件。

     <el-upload
            action="/mgr/common/imgUpload"//这里需要配置一下文件上传地址(跨域)
            list-type="picture-card"
            accept="image/*"
            :limit="imgLimit"
            :file-list="productImgs"
            :multiple="isMultiple"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :on-exceed="handleExceed"
            :on-error="imgUploadError">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>

    2.js

    export default {
        data() {
          return {
            dialogImageUrl: '',
            dialogVisible: false,
            productImgs: [],
            isMultiple: true,
            imgLimit: 6
          }
        },
        methods: {
          handleRemove(file, fileList) {//移除图片
            console.log(file, fileList);
          },
          handlePictureCardPreview(file) {//预览图片时调用
            console.log(file);
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
          },
    
          beforeAvatarUpload(file) {//文件上传之前调用做一些拦截限制
            console.log(file);
            const isJPG = true;
            // const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
    
            // if (!isJPG) {
            //   this.$message.error('上传头像图片只能是 JPG 格式!');
            // }
            if (!isLt2M) {
              this.$message.error('上传图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
          },
          handleAvatarSuccess(res, file) {//图片上传成功
            console.log(res);
            console.log(file);
            this.imageUrl = URL.createObjectURL(file.raw);
          },
          handleExceed(files, fileList) {//图片上传超过数量限制
            this.$message.error('上传图片不能超过6张!');
            console.log(file, fileList);
          },
          imgUploadError(err, file, fileList){//图片上传失败调用
            console.log(err)
            this.$message.error('上传图片失败!');
          }
        }
      }

    3.controller

     @RequestMapping(value = "/imgUpload")
        public Wrapper imgUpload(HttpServletRequest req, MultipartHttpServletRequest multiReq)
                throws IOException {
            System.out.println("---" + fileUploadPath);//我这里用的springboot 在application.properties中配置,使用@Value 获取的文件上传目录
    
            MultipartFile file = multiReq.getFile("file");
            String originalFilename = file.getOriginalFilename();
            String suffix = originalFilename.substring(originalFilename.indexOf("."));
            String localFileName = MD5Util.md5(file.getInputStream()) + suffix;
            File localFile = new File(fileUploadPath + localFileName);
            if (!localFile.exists()) {
                localFile.createNewFile();
    
                FileOutputStream fos = new FileOutputStream(
                        localFile);
                FileInputStream fs = (FileInputStream) multiReq.getFile("img").getInputStream();
                byte[] buffer = new byte[1024];
                int len = 0;
                while ((len = fs.read(buffer)) != -1) {
                    fos.write(buffer, 0, len);
                }
                fos.close();
                fs.close();
    
            } else {
                log.info("文件已存在!!");
            }
    
            return WrapMapper.wrap(
                    Wrapper.SUCCESS_CODE,
                    Wrapper.SUCCESS_MESSAGE,
                    "http://localhost:8080/img/" + localFileName);//这里是我执行封装的返回结果,也可以使用map,
        }

    4.MD5工具类

    import java.io.*;
    import java.security.MessageDigest;
    import java.security.NoSuchAlgorithmException;
    
    public class MD5Util {
    
        private static char[] Digit = {'0', '1', '2', '3', '4', '5', '6', '7', '8',
                '9', 'a', 'b', 'c', 'd', 'e', 'f'};
    
        public static String getMd5Sum(String inputStr)
                throws NoSuchAlgorithmException {
            MessageDigest digest = MessageDigest.getInstance("MD5");
            byte[] inputStrByte = inputStr.getBytes();
            digest.update(inputStrByte, 0, inputStrByte.length);
    
            byte[] md5sum = digest.digest();
    
            StringBuffer sb = new StringBuffer();
            for (int i = 0; i < 16; i++) {
                char[] ob = new char[2];
                ob[0] = Digit[md5sum[i] >> 4 & 0x0F];
                ob[1] = Digit[md5sum[i] & 0x0F];
                String s = new String(ob);
                sb.append(s);
            }
    
            return sb.toString();
        }
    
        /**
         * 对字符串进行 MD5 加密
         *
         * @param str
         *            待加密字符串
         *
         * @return 加密后字符串
         */
        public static String md5(String str) {
            MessageDigest md5 = null;
            try {
                md5 = MessageDigest.getInstance("MD5");
                md5.update(str.getBytes("UTF-8"));
            } catch (NoSuchAlgorithmException e) {
                throw new RuntimeException(e.getMessage());
            } catch (UnsupportedEncodingException e) {
                throw new RuntimeException(e.getMessage());
            }
            byte[] encodedValue = md5.digest();
            int j = encodedValue.length;
            char finalValue[] = new char[j * 2];
            int k = 0;
            for (int i = 0; i < j; i++) {
                byte encoded = encodedValue[i];
                finalValue[k++] = Digit[encoded >> 4 & 0xf];
                finalValue[k++] = Digit[encoded & 0xf];
            }
    
            return new String(finalValue);
        }
    
        /**
         * 签名字符串
         *
         * @param text
         *            需要签名的字符串
         * @param sign
         *            签名结果
         * @return 签名结果
         */
        public static boolean verify(String text, String sign) {
            String mysign = md5(text);
            if (mysign.equals(sign)) {
                return true;
            } else {
                return false;
            }
        }
    
        /**
         * 对文件进行 MD5 加密
         *
         * @param file
         *            待加密的文件
         *
         * @return 文件加密后的 MD5 值
         * @throws IOException
         */
        public static String md5(File file) throws IOException {
            FileInputStream is = new FileInputStream(file);
            return md5(is);
    
        }
    
    
        public static String md5(InputStream inputStream) throws IOException {
    
            MessageDigest md5 = null;
            try {
                md5 = MessageDigest.getInstance("MD5");
                int n = 0;
                byte[] buffer = new byte[1024];
                do {
                    n = inputStream.read(buffer);
                    if (n > 0) {
                        md5.update(buffer, 0, n);
                    }
                } while (n != -1);
                inputStream.skip(0);
            } catch (NoSuchAlgorithmException e) {
                throw new RuntimeException(e.getMessage());
            } finally {
                inputStream.close();
            }
    
            byte[] encodedValue = md5.digest();
    
            int j = encodedValue.length;
            char finalValue[] = new char[j * 2];
            int k = 0;
            for (int i = 0; i < j; i++) {
                byte encoded = encodedValue[i];
                finalValue[k++] = Digit[encoded >> 4 & 0xf];
                finalValue[k++] = Digit[encoded & 0xf];
            }
            return new String(finalValue);
        }
    }
    

    5.效果

    6.主要参考文档 element 官方中文文档,文档中好多属性介绍很笼统不够详细,个人感觉比较坑。

     

     

     

    展开全文
  • Element UI的表格table列的宽度自适应设置

    万次阅读 热门讨论 2018-03-23 16:05:22
    不要设置 width="110px" <el-table-column prop="login_id" align="center" label="工号"> </el-table-column> ...el-table-column prop="login_id" width="110px" align="center" label="工号...

    不要设置  width="110px"

     

    <el-table-column prop="login_id" align="center" label="工号"> </el-table-column>

     

     

     

     
     
    展开全文
  • H5项目引入Element UI 采用本地方式引入Element UI和Vuetify 引入资源结构 jquery和vue比较好引入,暂略 需要Element UI和Vuetify引入资源的,可在文章顶部下载 使用非常简单,直接<link>或者<script>...

    H5项目引入Element UI

    采用本地方式引入Element UI和Vuetify

    引入资源结构
    在这里插入图片描述
    jquery和vue比较好引入,暂略

    需要Element UI和Vuetify引入资源的,可在文章顶部下载

    使用非常简单,直接<link>或者<script>引入即可。

    解决Element UI默认图标不显示的问题

    按照官网推荐的方式引入Element UI图标不显示

    原因是因为会默认在font下寻找element-icons.ttfelement-icons.woff,如果找不到,则显示不出来。

    解决

    在font下加入以上两个文件
    在这里插入图片描述
    即可解决Element UI默认图标不显示的问题

    展开全文
  • Vue框架Element UI教程

    千次阅读 2019-09-12 16:25:01
    Vue框架Element UI教程-安装环境搭建(一). Vue框架Element UI教程-时间选择器(二). Vue框架Element UI教程-出现和隐藏动画(三). Vue框架Element UI教程-左侧导航栏(四). Vue框架Element UI教程-导航栏跳转...
  • Axure使用 element UI 元件库

    万次阅读 多人点赞 2020-02-17 10:45:00
    element UI 元件库文件 下载地址:https://github.com/ElementUI/Resources/raw/master/Element_Components_v2.0.0.rplib 或者 可以去官网点击下载 官网:https://element.eleme.cn/#/en-US/resource 安装步骤 下载...
  • Element UI注册模块实现

    千次阅读 2020-09-04 10:10:15
    简介 在项目开发过程中,遇到注册页面,该如何快速开发呢,接下来我用element ui 来实现,老司机开车请坐好 安装element ui 请大家自行百度 ,网上的方法有很多,在这里只演示如何实现
  • element ui的form表单通过rules属性传入约定的验证规则,达到表单验证的功能。rules属性中不仅可以验证非空、数值、邮件等,还可以结合正则表达式一起使用,验证自定义的规则。 例如:表单中有个字段是车牌号,要...
  • vue 安装并导入 Element UI

    千次阅读 2020-10-05 12:49:36
    第一步安装Element UI 首先进入vue项目所在的cmd目录输入: npm i element-ui -S 配置main.js文件 在配置文件中加入这三句话,引入Element UI import ElementUI from ‘element-ui’; import ‘element-ui/lib/...
  • element ui源码调试

    千次阅读 2020-05-07 12:50:13
    第一步:如何调试element ui 源码 npm run dev 第二步:打包完成后可以根据localhost:8085 访问到源码的demo 第三步:看到源码的界面 第四步:调试的时候可以使用console.log() 或者alert打印内容,但不可以在...
  • element ui 弹出层嵌入网页 <template> <div id="app"> <img src="./assets/logo.png"> <div> <el-button @click="startHacking">Start</el-button> ...
  • Element UI项目总结

    千次阅读 2017-11-08 23:04:57
    Element UI 感觉很强大, "element-ui": "^1.2.8", cnpm install @element-ui@1.2.8 --save 走你 main.js中引入 import 'element-ui/lib/theme-...
  • vue3.0 结合element ui 开发后台ui框架

    千次阅读 2019-03-18 11:37:20
    vue3.0 结合element ui 开发后台ui框架,根据element ui 官网步骤安装出现报错信息,解决方法: 按照element UI官网步骤, 启动vue 3.0项目:npm run serve 报错 提示缺少es2015包,安装这个包由于我先前已经安装...
  • element ui 离线文档

    2020-09-10 11:30:21
    vue中element ui 离线文档 链接地址:https://pan.baidu.com/s/1FC-z2S11umPeonKk4yXYgg 提取码:bksp
  • element UI修改组件的默认样式

    万次阅读 多人点赞 2018-08-13 14:45:03
    element UI修改组件的默认样式,方法有两种: 1.新建global.css,并在main.js中引入import "./assets/style/global.css"; 2.在单个xx.vue文件最后多写一对&lt;style&gt;......&lt;/style&...
  • vue-cli4引入element ui

    千次阅读 2020-08-23 15:49:20
    vue-cli4引入element ui 按照官网文档按需引入出问题报错,如下可解决问题 官方文档链接: element-ui文档 安装element ui npm i element-ui -S main.js引入 import ElementUI from 'element-ui' import 'element-...
  • vue Element UI侧边栏

    千次阅读 2019-07-03 16:55:13
    Element UI侧边栏NavMenu 导航菜单 NavMenu 导航菜单 NavMenu 导航菜单为网站提供导航功能,实现起来很简单,Element UI官网有各种实例,下面这个包含了下拉、分组: 下面为整个下拉菜单结构: ...
  • element UI的使用方法

    千次阅读 2019-03-03 11:29:34
    1.找官网 http://element.eleme.io/#/zh-CN/component/quickstart 2.安装 cnpm i element-ui -S -S表示 --save 3.引入element UI的css 和 插件 import ElementUI from 'element-ui'; ...
  • element UI 上传图片跨域

    千次阅读 2020-07-29 10:22:33
    element ui 解决上传图片跨域 近期项目有上传图片功能,项目用的是element UI 搭的vue 框架,在看了官方文档之后,复制代码调式,浏览器一直提示跨域,百度了各种解决方法,都是无效,下面举例百度的方法: 方法一:...
  • 使用Vue 结合Element UI实现图片轮播

    千次阅读 2020-01-08 17:16:50
    使用Vue 结合Element UI实现图片轮播 先安装Element UI,再Main.js里面引入Element UI import elementUi from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' //Element UI样式 Vue.use(elementUi) ...
  • Angular-Element UI介绍

    千次阅读 2019-04-06 17:03:49
    Element UI是一种开源前端框架,之前支持VUE,目前在Angular5中也可以使用。使用Element UI可以快速的搭建网站。 1.安装Element-angular模块 npm i --save element-angular 2.引入模块 import { BrowserModule } ...
  • 定制第三方UIElement UI为例

    千次阅读 2020-03-21 15:49:39
    ​ 我是个搞Android的,最近开始学习一些网页开发的内容,我发现一个问题就是大多数网页开发人员都是会使用一些第三方UI插件例如:Element UI、Muse-UI、Vant等,这些UI插件给我们提供了许多好用美观的UI,我们在...
  • element ui Dialog对话框

    千次阅读 2020-01-16 15:07:13
    element ui Dialog对话框 点×触发事件 点击标题右上角的×执行的事件使用的是自己手写的方法 用slot绑定重写 使用本身的 before-close、destroy-on-close、close均没有用 :close-on-click-modal=“false” // 点击...
  • Vue Element UI + OSS上传文件

    万次阅读 热门讨论 2018-08-06 23:08:04
      Element UI提供了upload上传组件,可以到官网查看upload组件的详细介绍;查看upload组件的上传源码upload/ajax,使用的XHR对象上传文件,在项目实践中,发现该上传方法上传大文件时会出现问题,所以决定使用阿里...
  • element ui table组件筛选数据

    千次阅读 2019-05-27 09:42:50
    需求:element ui table组件筛选全部数据 element ui 文档 注意: 1. @filter-change 要写在table根元素,也就是<el-table @filter-change="filterChange"></el-table>...
  • element ui loading加载开启与关闭

    万次阅读 2019-02-19 10:10:37
    我们在使用element ui加载组件的时候想要在请求开始之前开启组件,请求成功或者失败时关闭组件,官网上是在一个方法里面写着开启与关闭,所以我们可以做一个小小的封装; //Loading加载 openFullScreen() { ...
  • Element UI中change事件

    千次阅读 2019-07-22 13:37:52
    Element UI中change事件可以全局添加,例如this.change=funtion(){};
  • element UI-table表格列宽自适应

    万次阅读 热门讨论 2019-07-08 11:30:52
    1.element UI关于表格宽度的可以使用width和show-overflow-tooltip(超出部分悬浮显示) 以及列宽自适应的fit,但是这个属性不好使,也不知道为什么 2.查了一些资料,发现有用width的有自己写的(本人小白看不...
  • element ui 支持行列拖动 https://www.jianshu.com/p/362f880d0bfd
  • vuejs+element UI table的常见的属性及事件

    万次阅读 多人点赞 2018-04-23 16:20:21
    实例 1.Element-ui 中table 默认选中 toggleRowSelection 2.简单的增删改 1.table tr 点击 复选框选中 再次点击 复选框取消选中 ①设置一个全局函数 exports.install = function (Vue, options) { //删除数组 指定...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 43,109
精华内容 17,243
热门标签
关键字:

elementui