摘要: Sass有强大的@content关键字,可以配合@mixin混合宏,使用include关键字来做响应式布局。 然而,Less不支持@comtent关键字。于是做了以下配置: 使用: 阅读全文
posted @ 2018-07-23 14:50 大姐姐小姐姐 阅读(1388) 评论(0) 推荐(0) 编辑
摘要: 定义isActive=0,默认高亮第一个元素 方法里改变isActive的值,使其=index,从而使index==isActive条件成立,当前点击元素添加active样式,其他元素则不显示active样式。 附: v-for限制循环条数 阅读全文
posted @ 2018-07-23 13:56 大姐姐小姐姐 阅读(484) 评论(0) 推荐(0) 编辑
摘要: 数组排序实现点击箭头内容左右滚动,如图: 参考: 《JS调用方法实现向数组末尾追加该数组的第一个元素》 https://blog.csdn.net/songlf521/article/details/52538706 阅读全文
posted @ 2018-07-18 14:12 大姐姐小姐姐 阅读(159) 评论(0) 推荐(0) 编辑
摘要: 当我们在开发vue的项目过程中,避免不了在路由切换到其他的component再返回后该组件数据会重新加载,处理这种情况我们就需要用到keep-alive来缓存vue的组件信息,使其不再重新加载。 一、在app.vue里 但是这种情况会对所有的组件进行缓存,不能达到单个组件缓存的效果。 那么我们给部分 阅读全文
posted @ 2018-07-13 11:27 大姐姐小姐姐 阅读(1145) 评论(0) 推荐(0) 编辑
摘要: 作者:zhangwang链接:https://www.jianshu.com/p/42e11515c10f來源:简书著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 2017年12月7日更新,添加了clean-webpack-plugin,babel-env-preset,添加本 阅读全文
posted @ 2018-03-25 08:20 大姐姐小姐姐 阅读(193) 评论(0) 推荐(0) 编辑
摘要: 模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块,而无需重新加载整个页面。主要是通过以下几种方式,来显著加快开发速度: 保留在完全重新加载页面时丢失的应用程序状态。 只更新变更内容,以节省宝贵的开发时间。 调整样式更加快速 - 几乎 阅读全文
posted @ 2018-03-25 07:26 大姐姐小姐姐 阅读(111) 评论(0) 推荐(0) 编辑
摘要: 在使用 webpack 构建的典型应用程序或站点中,有三种主要的代码类型: 你或你的团队编写的源码。 你的源码会依赖的任何第三方的 library 或 "vendor" 代码。 webpack 的 runtime 和 manifest,管理所有模块的交互。 本文将重点介绍这三个部分中的最后部分,ru 阅读全文
posted @ 2018-03-25 07:24 大姐姐小姐姐 阅读(257) 评论(0) 推荐(0) 编辑
摘要: 因为服务器和浏览器代码都可以用 JavaScript 编写,所以 webpack 提供了多种构建目标(target),你可以在你的 webpack 配置中设置。 webpack 的 target 属性不要和 output.libraryTarget 属性混淆。有关 output 属性的更多信息,请查 阅读全文
posted @ 2018-03-25 07:22 大姐姐小姐姐 阅读(1718) 评论(0) 推荐(0) 编辑
摘要: 任何时候,一个文件依赖于另一个文件,webpack 就把此视为文件之间有依赖关系。这使得 webpack 可以接收非代码资源(non-code asset)(例如图像或 web 字体),并且可以把它们作为依赖提供给你的应用程序。 webpack 从命令行或配置文件中定义的一个模块列表开始,处理你的应 阅读全文
posted @ 2018-03-25 07:19 大姐姐小姐姐 阅读(490) 评论(0) 推荐(0) 编辑
摘要: resolver 是一个库(library),用于帮助找到模块的绝对路径。一个模块可以作为另一个模块的依赖模块,然后被后者引用,如下: 所依赖的模块可以是来自应用程序代码或第三方的库(library)。resolver 帮助 webpack 找到 bundle 中需要引入的模块代码,这些代码在包含在 阅读全文
posted @ 2018-03-25 07:18 大姐姐小姐姐 阅读(146) 评论(0) 推荐(0) 编辑
摘要: 在模块化编程中,开发者将程序分解成离散功能块(discrete chunks of functionality),并称之为模块。 每个模块具有比完整程序更小的接触面,使得校验、调试、测试轻而易举。 精心编写的模块提供了可靠的抽象和封装界限,使得应用程序中每个模块都具有条理清楚的设计和明确的目的。 N 阅读全文
posted @ 2018-03-25 07:15 大姐姐小姐姐 阅读(90) 评论(0) 推荐(0) 编辑
摘要: 你可能已经注意到,很少有 webpack 配置看起来很完全相同。这是因为 webpack 的配置文件,是导出一个对象的 JavaScript 文件。此对象,由 webpack 根据对象定义的属性进行解析。 因为 webpack 配置是标准的 Node.js CommonJS 模块,你可以做到以下事情 阅读全文
posted @ 2018-03-25 07:13 大姐姐小姐姐 阅读(94) 评论(0) 推荐(0) 编辑
摘要: 插件是 wepback 的支柱功能。webpack 自身也是构建于,你在 webpack 配置中用到的相同的插件系统之上! 插件目的在于解决 loader 无法实现的其他事。 剖析 webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack 阅读全文
posted @ 2018-03-25 07:08 大姐姐小姐姐 阅读(350) 评论(0) 推荐(0) 编辑
摘要: loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript 阅读全文
posted @ 2018-03-25 07:04 大姐姐小姐姐 阅读(148) 评论(0) 推荐(0) 编辑
摘要: 配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意,即使可以存在多个入口起点,但只指定一个输出配置。 用法(Usage) 在 webpack 中配置 output 属性的最低要求是,将它的值设置为一个对象,包括以下两点: filename 用于输出文件的文件名。 目标输出 阅读全文
posted @ 2018-03-24 09:18 大姐姐小姐姐 阅读(145) 评论(0) 推荐(0) 编辑
摘要: 正如我们在起步中提到的,在 webpack 配置中有多种方式定义 entry 属性。除了解释为什么它可能非常有用,我们还将向你展示如何去配置 entry 属性。 单个入口(简写)语法 用法:entry: string|Array<string> webpack.config.js entry 属性的 阅读全文
posted @ 2018-03-24 09:14 大姐姐小姐姐 阅读(1167) 评论(0) 推荐(0) 编辑
摘要: 通过折叠面板收纳内容区域 基础用法 可同时展开多个面板,面板之间不影响 1 <el-collapse v-model="activeNames" @change="handleChange"> 2 <el-collapse-item title="一致性 Consistency" name="1"> 阅读全文
posted @ 2018-03-16 06:56 大姐姐小姐姐 阅读(7209) 评论(0) 推荐(0) 编辑
摘要: 在有限空间内,循环播放同一类型的图片、文字等内容 基础用法 适用广泛的基础用法 结合使用el-carousel和el-carousel-item标签就得到了一个走马灯。幻灯片的内容是任意的,需要放在el-carousel-item标签中。默认情况下,在鼠标 hover 底部的指示器时就会触发切换。通 阅读全文
posted @ 2018-03-16 06:53 大姐姐小姐姐 阅读(9642) 评论(0) 推荐(0) 编辑
摘要: 将信息聚合在卡片容器中展示。 基础用法 包含标题,内容和操作。 Card 组件包括header和body部分,header部分需要有显式具名 slot 分发,同时也是可选的。 1 <el-card class="box-card"> 2 <div slot="header" class="clear 阅读全文
posted @ 2018-03-16 06:49 大姐姐小姐姐 阅读(2135) 评论(0) 推荐(0) 编辑
摘要: 基础用法 Popover 的属性与 Tooltip 很类似,它们都是基于Vue-popper开发的,因此对于重复属性,请参考 Tooltip 的文档,在此文档中不做详尽解释。 设置索引ref,在按钮中,我们注册了自定义指令v-popover,指向索引ID。trigger属性用于设置何时触发 Popo 阅读全文
posted @ 2018-03-14 07:46 大姐姐小姐姐 阅读(20857) 评论(0) 推荐(0) 编辑
摘要: 常用于展示鼠标 hover 时的提示信息。 基础用法 在这里我们提供 9 种不同方向的展示方式,可以通过以下完整示例来理解,选择你要的效果。 使用content属性来决定hover时的提示信息。由placement属性决定展示效果:placement属性值为:方向-对齐位置;四个方向:top、lef 阅读全文
posted @ 2018-03-14 07:44 大姐姐小姐姐 阅读(16245) 评论(0) 推荐(0) 编辑
摘要: 在保留当前页面状态的情况下,告知用户并承载相关操作。 基本用法 Dialog 弹出一个对话框,适合需要定制性更大的场景。 需要设置visible属性,它接收Boolean,当为true时显示 Dialog。Dialog 分为两个部分:body和footer,footer需要具名为footer的slo 阅读全文
posted @ 2018-03-14 07:37 大姐姐小姐姐 阅读(624) 评论(0) 推荐(0) 编辑
摘要: 引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。 基础用法 简单的步骤条。 设置active属性,接受一个Number,表明步骤的 index,从 0 开始。需要定宽的步骤条时,设置space属性即可,它接受Boolean,单位为px,如果不设置,则为自适应。 阅读全文
posted @ 2018-03-14 07:32 大姐姐小姐姐 阅读(11684) 评论(0) 推荐(0) 编辑
摘要: 将动作或菜单折叠到下拉菜单中。 基础用法 移动到下拉菜单上,展开更多操作。 通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单。默认情况下,下拉按钮只要hover即可,无需点击也会显示下拉菜单。 1 <el-dropdown> 2 <span class= 阅读全文
posted @ 2018-03-14 07:28 大姐姐小姐姐 阅读(18704) 评论(0) 推荐(0) 编辑
摘要: 显示当前页面的路径,快速返回之前的任意页面。 基础用法 适用广泛的基础用法。 在el-breadcrumb中使用el-breadcrumb-item标签表示从首页开始的每一级。Element 提供了一个separator属性,在el-breadcrumb标签中设置它来决定分隔符,它只能是字符串,默认 阅读全文
posted @ 2018-03-14 07:24 大姐姐小姐姐 阅读(702) 评论(0) 推荐(0) 编辑
摘要: 分隔内容上有关联但属于不同类别的数据集合。 基础用法 基础的、简洁的标签页。 Tabs 组件提供了选项卡功能,默认选中第一个标签页,你也可以通过 value 属性来指定当前选中的标签页。 1 <template> 2 <el-tabs v-model="activeName" @tab-click= 阅读全文
posted @ 2018-03-14 07:22 大姐姐小姐姐 阅读(7575) 评论(0) 推荐(0) 编辑
摘要: 顶栏 适用广泛的基础用法。 导航菜单默认为垂直模式,通过mode属性可以使导航菜单变更为水平模式。另外,在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color、text-color和active-text-color,分别用于设置菜单的背景色、菜单的文字颜 阅读全文
posted @ 2018-03-14 07:17 大姐姐小姐姐 阅读(13646) 评论(0) 推荐(0) 编辑
摘要: 悬浮出现在页面角落,显示全局的通知提醒消息。 基本用法 适用性广泛的通知栏 Notification 组件提供通知功能,Element 注册了$notify方法,接收一个options字面量参数,在最简单的情况下,你可以设置title字段和message字段,用于设置通知的标题和正文。默认情况下,经 阅读全文
posted @ 2018-03-14 07:15 大姐姐小姐姐 阅读(779) 评论(0) 推荐(0) 编辑
摘要: 模拟系统的消息提示框而实现的一套模态对话框组件,用于消息提示、确认消息和提交内容。 从场景上说,MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt,因此适合展示较为简单的内容。如果需要弹出较为复杂的内容,请使用 Dialog。 消息提示 当用户进行操作时会被触 阅读全文
posted @ 2018-03-14 07:09 大姐姐小姐姐 阅读(16067) 评论(0) 推荐(1) 编辑
摘要: 常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。 基础用法 从顶部出现,3 秒后自动消失。 Message 在配置上与 Notification 非常类似,所以部分 options 在此不做详尽解释,文末有 options 列表,可以结合 Noti 阅读全文
posted @ 2018-03-14 07:04 大姐姐小姐姐 阅读(869) 评论(0) 推荐(0) 编辑
摘要: 加载数据时显示动效。 区域加载 在表格等容器中加载数据时显示。 Element 提供了两种调用 Loading 的方法:指令和服务。对于自定义指令v-loading,只需要绑定Boolean即可。默认状况下,Loading 遮罩会插入到绑定元素的子节点,通过添加body修饰符,可以使遮罩插入至 DO 阅读全文
posted @ 2018-03-14 06:58 大姐姐小姐姐 阅读(12610) 评论(0) 推荐(0) 编辑
摘要: 基本用法 页面中的非浮层元素,不会自动消失。 Alert 组件提供四种主题,由type属性指定,默认值为info。 1 <template> 2 <el-alert 3 title="成功提示的文案" 4 type="success"> 5 </el-alert> 6 <el-alert 7 tit 阅读全文
posted @ 2018-03-14 06:54 大姐姐小姐姐 阅读(1028) 评论(0) 推荐(0) 编辑
摘要: 出现在按钮、图标旁的数字或状态标记。 基础用法 展示新消息数量。 定义value属性,它接受Number或者String。 1 <el-badge :value="12" class="item"> 2 <el-button size="small">评论</el-button> 3 </el-ba 阅读全文
posted @ 2018-03-14 06:50 大姐姐小姐姐 阅读(2232) 评论(0) 推荐(0) 编辑
摘要: 当数据量过多时,使用分页分解数据。 设置layout,表示需要显示的内容,用逗号分隔,布局元素会依次显示。prev表示上一页,next为下一页,pager表示页码列表,除此以外还提供了jumper和total,size和特殊的布局符号->,->后的元素会靠右显示,jumper表示跳页元素,total 阅读全文
posted @ 2018-03-14 06:46 大姐姐小姐姐 阅读(4394) 评论(0) 推荐(0) 编辑
摘要: 用清晰的层级结构展示信息,可展开或折叠。 基础用法 基础的树形结构展示。 1 <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree> 2 3 <script> 4 export defa 阅读全文
posted @ 2018-03-14 06:43 大姐姐小姐姐 阅读(8483) 评论(0) 推荐(0) 编辑
摘要: 用于展示操作进度,告知用户当前状态和预期。 线形进度条 — 百分比外显 Progress 组件设置percentage属性即可,表示进度条对应的百分比,必填,必须在 0-100。 1 <el-progress :percentage="0"></el-progress> 2 <el-progress 阅读全文
posted @ 2018-03-14 06:36 大姐姐小姐姐 阅读(3773) 评论(0) 推荐(0) 编辑
摘要: 用于标记和选择。 基础用法 由type属性来选择tag的类型,也可以通过color属性来自定义背景色。 1 <el-tag>标签一</el-tag> 2 <el-tag type="success">标签二</el-tag> 3 <el-tag type="info">标签三</el-tag> 4 阅读全文
posted @ 2018-03-14 06:34 大姐姐小姐姐 阅读(846) 评论(0) 推荐(0) 编辑
摘要: 用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。 基础表格 基础的表格展示用法。 当el-table元素中注入data对象数组后,在el-table-column中用prop属性来对应对象中的键名即可填入数据,用label属性来定义表格的列名。可以使用width属性来定义列 阅读全文
posted @ 2018-03-13 07:30 大姐姐小姐姐 阅读(1468) 评论(0) 推荐(0) 编辑
摘要: 由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据 典型表单 包括各种表单项,比如输入框、选择器、开关、单选框、多选框等。 在 Form 组件中,每一个表单域由一个 Form-Item 组件构成,表单域中可以放置各种类型的表单控件,包括 Input、Select、Checkbox、 阅读全文
posted @ 2018-03-13 07:18 大姐姐小姐姐 阅读(4386) 评论(0) 推荐(0) 编辑
摘要: 基础用法 Transfer 的数据通过 data 属性传入。数据需要是一个对象数组,每个对象有以下属性:key 为数据的唯一性标识,label为显示文本,disabled 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 v-model 的变量,值为数据项的 key 所组成的数组。当然,如 阅读全文
posted @ 2018-03-13 07:10 大姐姐小姐姐 阅读(8938) 评论(0) 推荐(0) 编辑