细心的人儿都会发现elementUI官网的滚动条样式优美,但是elementUI中并未给出这个滚动条组件,打开调试页面发现用到了el-scrollbar.问一下度娘发现早就有前辈们发现了这个问题并给出了解决方案.下面就记录下来用法以备不时之需. 1.组件名称 <el-scrollbar></el-scrollbar> 2.默认样式修改 ⚠️ 改变.el-scrollbar__wrap这个class的样式一定要仅改变指定想改变的滚动条,避免影响到其他组件中el-dropdown有滚动

我使用的element-ui的版本是1.4.13. 如上图所示,使用el-select组件,要实现可搜索.可复选.可创建条目时,展示样式是如上图所示,输入框的高度会撑开,影响页面布局,按照产品的需求,要调整为以下样式: 1.复选时,输入框中不以标签的形式展示,而是以字符串的形式展示. 2.超出部分显示省略号,并且鼠标移入显示提示框,用来展示全选的内容. 下面是源码修改部分: (1)在select的props中添加了一个参数noTag用来控制是否以字符串形式显示输入框中的数据.添加了上面的el-p

在翻看 element-ui官网的文档时,发现其左侧导航和右边的内容超出屏幕时,滚动条的样式比较小巧,通过浏览器审查工具查看,发现它是使用了el-scrollbar的样式,跟element-ui的组件样式命名一致.但文档中并没有关于这个 scrollbar组件的使用文档,搜索一番得知这是一个隐藏组件,官方在 github 的 issues 中表示不会写在文档中,需要用的自己看源码进行调用. 1.使用 按需加载需要单独加载Scrollbar组件.并使用(可能会报无Scrollbar类的错误,但不影

全文地址:http://www.mossle.com/docs/activiti/ Activiti 5.15 用户手册 Table of Contents 1. 简介 协议 下载 源码 必要的软件 JDK 6+ Eclipse Indigo 和 Juno 报告问题 试验性功能 内部实现类 2. 开始学习 一分钟入门 安装Activiti 安装Activiti数据库 引入Activiti jar和依赖 下一步 3. 配置 创建ProcessEngine ProcessEngineConfigur

话不多说,直接上图 总结:el-scrollbar组件设置高度100%包裹住需要滚动的dom结构即可. 再例如: 至于配置props,参见源码https://github.com/ElemeFE/element/blob/dev/packages/scrollbar/src/main.js 至于为什么我会知道这样用, 因为现在是凌晨01:48:38, 看了3个小时element-ui源码.

一.报错原因 在我想按需引入element-ui时,突然报错: 这个报错来的有点措不及防.明明在页面当中能够使用,为仕么在单独引入时却不能引用了,真是百思不得其解. 经过在百度上的查找才知道,原来Scrollbar是element-ui的隐藏组件,没有暴露这个组件. 二.解决方法 既然element-ui没有暴露这个方法,那我只能自己手动进行暴露了. 首先在node_modules/element-ui/types下面添加一个scrollbar.d.ts的文件: 然后在element-ui.d.

看了  http://element.eleme.io/#/zh-CN/component/installation     一些组件和样式够用了 , 试了下 element-ui ,配合到vue中 1. 安装 npm i element-ui -S 看快速上手   http://element.eleme.io/#/zh-CN/component/quickstart 2. 引入 element-ui a .引入完整Element 在 main.js 中写入以下内容: import Vue f

提要 Vue2.0+Vuex+ElementUI是现在很多项目都在使用的BS软件的开发组合. Vue相较于Angular具有学习成本低,上手快以及组件轻量化的特点:相较于React,其官方提供的很多指令以及可以自定义的指令能够为让开发更加高效.并且相较于React生命周期监听所有props和state的变化,Vue中提供的watch方法监听单个数据的变化,能够更加直观的进行数据操作. 需要修改源码的项目需求 需要修改源码的项目需求总共有两处: ElementUI提供的树型组件的CheckBox需

 一.页面 1.布局 假设,我们要开发一个会员列表的页面. 首先,添加vue页面文件“src\pages\Member.vue” 参照文档http://element.eleme.io/#/zh-CN/component/table中的例子,实现一个静态的列表页面 代码如下: <template> <section> <!--工具条--> <el-col :span="24" class="toolbar" style=&q

日常的工作中,我们无时无刻不在和样式打交道.没有样式的页面就如同一部电影,被人随意地在不同地方做了截取. BEM规范应该是对于我们现在前端组件开发中我觉得是最合适的一套范式了.所以,我在自己的日常工作中也是十分的推崇这样的一套CSS范式. 而自己最近也在看各种ui框架的源码,觉得ele对于这块还是处理的蛮好的,所以拿出来说说. 1.BEM BEM是什么? BEM范式我在以前自己的文章中简单的说过,就不再赘述了. 而我们来看看饿了么在BEM这块有着怎样的实践. //element-ui //con

做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天:欠揍的是产品随心所欲.为所欲为,如同村霸横行乡里.只手遮天:苦逼的是前端苦不堪言,如同哑巴吃黄连,有苦说不出:无奈的是前端无可奈何花落去,如同至尊宝戴上金箍无法爱你,摘下金箍无法救你:尿性的是前端苦尽甘来,如同唐僧师徒历经九九八十一难,终成正果的高光时刻! 又特么的南辕北辙了,矫情个鸟啊!有需求,上

一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN 目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用. <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/eleme

目前这家公司前端用的是vue框架,由于在之前的公司很少涉及到前端内容,对其的了解也只是会使用js和jquery,所以..慢慢来吧. 在此之前需要先了解vue的大致语法和规则,可先前往官方文档进行学习https://cn.vuejs.org/v2/guide/ 1.搭建vue工程 使用vue一般有直接引入vue.js方式,或者使用node.js进行构建,因为大部分的教程都是围绕node.js来展开的,所以这儿也使用node. 步骤1.下载node.js并安装,一般安装完成后会环境变量已经配置好,网

对树形菜单的递归操作,首先应该对树形菜单数据进行整理,优化成自己需要的类型 比如Vue + ElementUI的动态侧边栏数据 export function routerRoleToPretty (routing = [], deepPath = '/main/') { return routing.map(item => { if (item instanceof Array) { // 由于后台返回数据问题 所以这里给了一个兼容判断 return item[0] } else { retu

 需求 1.点击“添加”按钮,弹出录入数据的对话框窗口,并录入数据,如果数据有误则不允许提交.数据填写完毕后,点击“保存”按钮,调用http协议提交数据,提交完毕刷新页面数据.点击“取消”按钮关闭对话框. 2.点击列表中的“修改”按钮,弹出数据修改对话框窗口,功能同上. 3.点击列表中的“删除”按钮,弹出删除数据的询问窗口,功能以此类推. 一.添加 在“src\mock\member.js”中,增加模拟保存数据的方法: adapters.push( (mockAdapter) => mockAd

1.element-ui 地址:https://github.com/ElemeFE/element 2.修改elelment-ui版本:2.2.2(请选择和项目相对应的版本) 3.修改内容:穿梭框组件(transfer),实现上下移动排序 4.效果:                步骤 从github上把项目克隆到本地 全局安装yarn :npm install -g yarn 安装依赖并启动项目:npm run dev (已经使用 yarn 进行依赖版本的锁定,所以请不要使用 npm ins

elementUI 和vue 还有axios +java的完整示例, 代码敲了很久, 累死了, 以后用就直接复制了 ,很值吧!!! 1.html <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>导入</title> <link rel="stylesheet" href="https://unpkg.com

elementUI 页面如果需要加载很多东西的时候, 自己定义的按钮或者弹出框dialog的文字就会显示在页面上, 一闪而过, 因此需要优化一下, elementUI 提供的loading有遮罩层, 具体使用就不说了, 下面提供的是普通的处理方法,简单实用!! <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Titl

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-cha

Carousel 走马灯源码解析 1. 基本原理:页面切换 页面切换使用的是 transform 2D 转换和 transition 过渡 可以看出是采用内联样式来实现的 举个栗子 <div :style="'transform: translateX('+ translate +'px);'"> </div> data() { return { translate: 0 }; } 是不是感觉自己已经可以写个轮播图了 骚年莫慌 现在来看源码 main.vue &

目前一直使用vue去搭建项目,我个人习惯用Visual Studio Code编辑工具,所以下面的所有操作都是在这个编辑器中 在安装的时候,为了避免安装过程中出错,你最好安装了淘宝镜像(官网:https://npm.taobao.org/) npm install -g cnpm --registry=https://registry.npm.taobao.org 1,安装vue-cli cnpm install vue-cli -g        //    通过vue -V查看vue版本号