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