摘要: Carousel 走马灯源码分析整理笔记,这篇写的不详细,后面有空补充 ###main.vue <template> <!--走马灯的最外层包裹div--> <div class="el-carousel" :class="{ 'el-carousel--card': type 'card' }" 阅读全文
posted @ 2018-12-13 17:02 清风明月小虾米 阅读(9024) 评论(0) 推荐(1) 编辑
摘要: Collapse 折叠面板源码: ###collapse.vue <template> <!--一组折叠面板最外层包裹div--> <div class="el-collapse" role="tablist" aria-multiselectable="true"> <slot></slot> < 阅读全文
posted @ 2018-12-12 16:37 清风明月小虾米 阅读(11301) 评论(1) 推荐(1) 编辑
摘要: Steps步骤条组件源码: ###steps.vue <template> <!--设置 simple 可应用简洁风格,该条件下 align-center / description / direction / space 都将失效。--> <div class="el-steps" :class= 阅读全文
posted @ 2018-12-12 11:54 清风明月小虾米 阅读(8836) 评论(1) 推荐(0) 编辑
摘要: Message组件源码: ###main.js import Vue from 'vue'; import Main from './main.vue'; import { PopupManager } from 'element-ui/src/utils/popup'; import { isVN 阅读全文
posted @ 2018-12-11 16:47 清风明月小虾米 阅读(3970) 评论(0) 推荐(0) 编辑
摘要: element-ui源码的版本是2.4.9 ###pagination.js import Pager from './pager.vue'; import ElSelect from 'element-ui/packages/select'; import ElOption from 'eleme 阅读全文
posted @ 2018-12-06 17:09 清风明月小虾米 阅读(2658) 评论(0) 推荐(0) 编辑
摘要: input 输入框组件 源码: html <! 当type的值不等于textarea时 <! 前置元素 <! 核心部分:输入框 <! input框内的头部的内容 <! prefixIcon头部图标存在时,显示i标签 <! input框内的尾部的内容 <! showClear为false时,显示尾部图 阅读全文
posted @ 2018-12-04 17:00 清风明月小虾米 阅读(2333) 评论(0) 推荐(0) 编辑
摘要: Tag 标签组件 html export default { name: 'ElTag', props: { text: String, closable: Boolean, //是否可关闭 type: String, //主题 hit: Boolean, //是否有边框描边 disableTran 阅读全文
posted @ 2018-11-30 18:06 清风明月小虾米 阅读(3577) 评论(3) 推荐(0) 编辑
摘要: Progress进度条组件 html <! 最外层 <! 线形进度条 <! 进度条外部背景;strokeWidth:文档中说是宽度,这里是高度呀 <! 进度条内部百分比 <! 线形进度条内部文字 {{percentage}}% <! 环形进度条 <! 进度条外面文字内容 <! 进度条当前状态stat 阅读全文
posted @ 2018-11-30 14:37 清风明月小虾米 阅读(2220) 评论(0) 推荐(0) 编辑
摘要: inputNumber组件 解析: (1)先看下html结构 左边的减号和右边的加号是通过绝对定位,设置在input左右的padding位置的,input的css代码如下: 这个inputNumber源码还算简单,多看几遍就懂了 Card 组件 Breadcrumb组件 阅读全文
posted @ 2018-11-29 17:43 清风明月小虾米 阅读(2021) 评论(0) 推荐(0) 编辑
摘要: 源码如下: 解析: (1)组件的html结构 input标签被隐藏掉了,css部分代码如下: 如果把上面的样式代码注释掉,如图所示: 通过 javascript getMigratingConfig() { return { props: { 'on color': 'on color is ren 阅读全文
posted @ 2018-11-29 11:41 清风明月小虾米 阅读(2463) 评论(0) 推荐(2) 编辑