摘要:
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 阅读全文