清风明月小虾米

摘要： Carousel 走马灯源码分析整理笔记，这篇写的不详细，后面有空补充 ###main.vue <template> <!--走马灯的最外层包裹div--> <div class="el-carousel" :class="{ 'el-carousel--card': type 'card' }" 阅读全文

摘要： Collapse 折叠面板源码： ###collapse.vue <template> <!--一组折叠面板最外层包裹div--> <div class="el-collapse" role="tablist" aria-multiselectable="true"> <slot></slot> < 阅读全文

摘要： Steps步骤条组件源码： ###steps.vue <template> <!--设置 simple 可应用简洁风格，该条件下 align-center / description / direction / space 都将失效。--> <div class="el-steps" :class= 阅读全文

摘要： Message组件源码： ###main.js import Vue from 'vue'; import Main from './main.vue'; import { PopupManager } from 'element-ui/src/utils/popup'; import { isVN 阅读全文

摘要： element-ui源码的版本是2.4.9 ###pagination.js import Pager from './pager.vue'; import ElSelect from 'element-ui/packages/select'; import ElOption from 'eleme 阅读全文

摘要： input 输入框组件 源码： html <! 当type的值不等于textarea时 <! 前置元素 <! 核心部分：输入框 <! input框内的头部的内容 <! prefixIcon头部图标存在时，显示i标签 <! input框内的尾部的内容 <! showClear为false时，显示尾部图 阅读全文

摘要： Tag 标签组件 html export default { name: 'ElTag', props: { text: String, closable: Boolean, //是否可关闭 type: String, //主题 hit: Boolean, //是否有边框描边 disableTran 阅读全文

摘要： Progress进度条组件 html <! 最外层 <! 线形进度条 <! 进度条外部背景；strokeWidth:文档中说是宽度，这里是高度呀 <! 进度条内部百分比 <! 线形进度条内部文字 {{percentage}}% <! 环形进度条 <! 进度条外面文字内容 <! 进度条当前状态stat 阅读全文

摘要： inputNumber组件 解析： （1）先看下html结构 左边的减号和右边的加号是通过绝对定位，设置在input左右的padding位置的，input的css代码如下： 这个inputNumber源码还算简单，多看几遍就懂了 Card 组件 Breadcrumb组件 阅读全文

摘要： 源码如下： 解析： （1）组件的html结构 input标签被隐藏掉了，css部分代码如下： 如果把上面的样式代码注释掉，如图所示： 通过 javascript getMigratingConfig() { return { props: { 'on color': 'on color is ren 阅读全文