![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
element-plus
文章平均质量分 68
潇蓝诺依
这个作者很懒,什么都没留下…
展开
-
element-plus 源码学习——rate
ratehtml<template> <!-- 最外层 可以通过tab 进行切换,通过 上下左右键 进行数值的加减 --> <div class="el-rate" role="slider" :aria-valuenow="currentValue" :aria-valuetext="text" aria-valuemin="0" :aria-valuemax="max" tabindex="0"原创 2021-07-07 17:10:45 · 771 阅读 · 0 评论 -
element-plus 源码学习——pagination
pagination分页组件是有多个组件组成的sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot除了-> 、slot 其余都是组件->的使用,使其右浮动。<el-pagination background layout="prev, ->, pager, next" :total="1000" />render函数render() { co原创 2021-07-07 17:07:11 · 2411 阅读 · 0 评论 -
element-plus 源码学习——switch
switch结构<div class="el-switch"> <input class="el-switch__input"> <!-- 前面文字描述 --> <span></span> <!-- 开关 --> <span class="el-switch__core"></span> <!-- 后面文字描述 --> <span></span&g原创 2021-04-14 17:18:36 · 1187 阅读 · 0 评论 -
element-plus 源码学习——input-number
input-number结构<div class='el-input-number'> <!-- 减号 --> <span class="el-input-number__decrease"></span> <!-- 加号 --> <span class="el-input-number__increase"></span> <!-- el-input -->原创 2021-04-14 11:30:19 · 1357 阅读 · 0 评论 -
element-plus 源码学习——input
input结构<template> <div ...> <!-- 非textarea --> <template v-if="type !== 'textarea'"> <!-- 前置元素 --> <div class="el-input-group__prepend" v-if="$slots.prepend"> <slot name="prepend">原创 2021-04-12 16:53:23 · 2930 阅读 · 0 评论 -
element-plus 源码学习——checkbox
checkboxLabel<label class="el-checkbox"> <!-- 复选框 --> <span class="el-checkbox__input"></span> <!-- 文字部分 --> <span class="el-checkbox__label"></span></label>选中样式.el-checkbox__inner {//???? 复原创 2021-04-07 14:02:53 · 1409 阅读 · 0 评论 -
element-plus 源码学习——radio
radiolabel放在最外层的作用是扩大鼠标点击范围,无论是点击在文字还是input上都能够触发响<label class="el-radio"> <!-- 单选框 --> <span class="el-radio__input"></span> <!-- 文字部分 --> <span class="el-radio__label"></span></label><temp原创 2021-04-07 13:57:59 · 1341 阅读 · 1 评论 -
element-plus 源码学习——layout
文章目录LayoutgutterProvide/injecth函数fix gutter bugLayout涉及到的组件row col源码内容省略guttergutter的作用是让row里面的col产生出间隔来,但是注意容器的最左和最右侧是没有间隔的上图就是最终示意图,黑框就是<el-row>的宽度范围,里面是<el-col>组件,这个组件的宽度其实按<el-row>百分比来计算,而且box-sizing是border-box,注意gutter属性是原创 2021-04-07 11:15:17 · 1024 阅读 · 0 评论