最近初学vue，试着做一个小项目熟悉语法与思想，其中使用elemen-ui的导航栏做路由跳转切换页面。下面记录一下学习过程 element-ui引入vue项目的用法参考element官网 首先复制官网的例子，在这基础上再修改成我们想要的样子。 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"><el-menu-item index="1">处理中心</el-menu-item><el-submenu index="2"><template slot="title...
element-ui 侧边栏默认要全部展开怎么做？ element-ui文档中是这么写的 default-openeds 当前打开的sub-menu的key数组 给<el-menu></el-menu>标签加上这个属性 <el-menu class="el-menu-vertical" @open="handleOpen" @close="handleClose" theme="dark" :default-openeds="openeds">openeds需要在data里面定义一下 openeds是一个数组（当前打开的sub-menu的 key 数组） data () {return {openeds: [1],uniqueOpened: false} } ope...
element-ui对话框可拖拽及边界处理应业务需求，需要实现对话框可拖拽问题，应element-ui没有提供官方支持，于是便参考大神的文章，得出了适合业务需要的解决方案。很多大神给出的代码是没有解决边界问题的，但是不解决边界问题存在一个bug，拖到不可视区域后边再也拖不回来了，不信你们可以试试。在实现的功能的情况下，封装成了js文件，然后再main.js中引入后可全局使用。还是上代码吧 功能实现代码directives.js代码如下： impor...
element-ui 中验证 一、简单逻辑验证（直接使用rules） 实现思路 ?html中给el-form增加 :rules="rules" ?html中在el-form-item 中增加属性 prop="名称" ?js中直接在data中定义rules:{} ?html部分 <el-form ref="form" :rules="rules" :model="form" label-width="300px"><el-form-item label="发货地址：" prop="fAdderss"><el-input class="inp" v-model="form.fAdderss" auto-complete="true"></el-input><el-button type="prima...
element-ui界面非常简洁和美观，提供的组件可以满足绝大多数的应用场景，当表格中显示了图片的缩略图时，想要鼠标浮动在缩略图上时放大图片的效果，该如何实现呢？element-ui虽然没有直接提供图片悬浮放大的组件，但是可以使用Popover弹出框组件，一样实现效果，如下：具体的代码（此处只是图片单元格的代码，其它代码省略）： <el-table-columnprop="picture"header-align="center"align="center"width="150px"label="图片"><temp...
在vue2.0中引用element-ui组件库 element-ui是由饿了么团队开发的一套基于 Vue 2.0 的桌面端组件库。 官网： http://element.eleme.io/ 安装 npm i element-ui -S引用完整的element-ui import ElementUI from element-ui; import element-ui/lib/theme-chalk/index.css; Vue.use(ElementUI);需要注意的是，样式文件需要单独引入。 如果报错，在 webpack.config.js 中配置 file_loader。可以在 rules 数组内直接增加下面这个配置项：...
Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是 Mint UI 。需求场景如下： 指定起止日期，后选的将会受到先选的限制不同的日期选择器，不过也存在关联关系实现方法不难，利用了 change 事件，动态改变 picker-options 中的 disableDate 即可。 查看Demo Template <script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/element-ui@2.3.8/lib/index.js"></scrip...
在vue构建的项目中，我们常用element-ui插件，在我的博客前面有讲述，具体怎么用vue-i18n插件进行国际化开发，但是在前面博客中，如果项目中使用了element-ui插件，插件中的语言文字替换可以结合element-ui插件一同进行。element-ui插件自身也提供了语言包。具体的配置和使用方法参考如下： 默认你已构建好了一个vue项目，在vue项目中安装vue-i18n以及element-ui插件 cnpm i vue-i18n --save-dev cnpm i element-ui --save-dev 在...
Element-UI 的 Table 组件很强大，但是我们的需求更强大... 简单粗暴的来一发效果图：一、数据驱动 传统的拖动效果，都是基于通过 mousedown、mousemove、mouseup 事件来修改删减 dom 节点 但 Vue 是一个数据驱动的前端框架，开发时应尽量避免操作 dom 而且 Element-UI 的 Table 组件封装得很严谨，直接操作 dom 很容易产生不可预计的 bug 所以我的核心思路就是：通过一个数组渲染表头（列），然后修改这个数组的顺序，从而修改列表...
公司有一个新的需求，点击ElTableColumn的头部可以进行搜索，这个功能同事已经做出来了，但是使用有些不方便，自己就打算封装成一个组件，学习一下。ElTableColumn本来是这个样子的：要做成的是这个样子：我直接就放代码了，挨着挨着说明太多了。 代码的结构：组件 <!-- ElTableColumnPro.vue --> <template><el-table-column v-if="visible" :formatter="formatter" :align=align :prop="prop" :header-align="headerAlign" :labe...
element-ui组件的tree树形控件修改源码改为iview组件 实现原理修改了element-ui源码，把源码里面的tree模块提取出来然后修改element自带checkbox等组件为iview的checkbox，并且兼容方法最后修改element样式，改为iview风格，自己也添加了一些样式 新的tree组件可以说是element的逻辑，iview的风格 <template><div@click.stop="handleClick"v-show="node.visible"><div class="chu-tree-node__content":style="{ padding-left: (nod...
解决办法： <el-input v-model="searchParmas.gameName" placeholder="游戏名称" class="w120" @keyup.native="getGameList(searchParmas.gameName)"></el-input> 加上.native覆盖原有封装的keyup事件即可。 以上这篇vue element-ui 绑定@keyup事件无效的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
前端工作中，经常需要图片裁剪的场景，cropper.js是一款优秀的前端插件，api十分丰富。 本文是在vue-cli项目下封装图片裁剪插件，效果图如下：话不多说，看步骤吧。 第一步：准备开发环境 cropper.js是基于jquery的，所以要先安装jquery 执行命令： npm install --save-dev jquery cropper 为webpack配置添加jquery的映射 修改webpack.base.conf.js配置，添加标红的一行第二步：新建图片裁剪组件index.vue内容： 由于用了eleme...
组件中： <el-table :data="users" highlight-current-row v-loading="listLoading" style="width: 100%;"><el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable></el-table-column><el-table-column prop="cz" label="操作" width="320"><template scope="scope"><el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-button size="small" @click="hand...
html代码 因为我写在template中，也就是新建了组建中，贴出代码。 <el-pagination smalllayout="prev, pager, next":total="total" @current-change="current_change"> </el-pagination>代码中，small代表是否使用小型分页样式 layout代表组件布局，子组件名用逗号分隔 属性： total代表总条目数 事件： current-change用于监听页数改变，而内容也发生改变 其他属性可参见element官方API http://element.eleme.io/#/zh-CN/componen...