huxianc的博客

这里以element-plus为例，element-ui同理我这里使用的是element-plus官网中自定义主题的第二种 - 在项目中改变 SCSS 变量按需引入组件可查看官网基本上按着官网的教程走就可以实现我这里贴上我的代码// babel.config.js 修改后记得重启项目module.exports = { presets: ["@vue/cli-plugin-babel/preset"], plugins: [ [ "component", .

源代码地址 - linkversion:element-plus 1.0.1-beta.0link组件 相对比较简单<template> <a :class="[ 'el-link', type ? `el-link--${type}` : '', disabled && 'is-disabled', underline && !disabled && 'is-und.

源代码地址 - infinite-scroll version:element-plus 1.0.1-beta.0infinite-scroll是指令，不是组件源码中涉及很多原生js属性，可以参考这里，对照观看import { nextTick } from 'vue'import { isFunction } from '@vue/shared'import throttle from 'lodash/throttle'import { entries } from '@eleme.

源代码地址 - iamge源代码地址 - iamge-viewerversion:element-plus 1.0.1-beta.0image<template> <div ref="container" :class="['el-image', $attrs.class]" :style="$attrs.style" > <!-- 加载状态 --> <slot v-if="loading" name=.

源代码地址 - drawerversion:element-plus 1.0.1-beta.0<template> <teleport to="body" :disabled="!appendToBody"> <transition name="el-drawer-fade" @after-enter="afterEnter" @after-leave="afterLeave" > <!.

源代码地址 - dividerversion:element-plus 1.0.1-beta.0<template> <div :class="['el-divider', `el-divider--${direction}`]"> <!-- 水平方向才会显示插槽 --> <div v-if="$slots.default && direction !== 'vertical'" :class=.

源代码地址 - dialogversion:element-plus 1.0.1-beta.0index.vue<template> <!-- dialog是v-if控制渲染的 --> <template v-if="destroyOnClose && !visible"></template> <template v-else> <!-- vue3 新增组件 teleport to表示元素.

源代码地址 - trap-focusversion:element-plus 1.0.1-beta.0这个指令只在dialog中使用了import { nextTick } from 'vue'import { on, off } from '@element-plus/utils/dom'import { obtainAllFocusableElements, EVENT_CODE } from '@element-plus/utils/aria'import type { Ob.

源代码地址 - overlayversion:element-plus 1.0.1-beta.0<script lang="ts">import { createVNode, defineComponent, renderSlot } from 'vue'import { PatchFlags } from '@element-plus/utils/vnode'export default defineComponent({ name: 'ElOverlay', pr.

源代码地址 - container[源代码地址 - header]((https://github.com/element-plus/element-plus/blob/dev/packages/container/src/header.vue)[源代码地址 - footer]((https://github.com/element-plus/element-plus/blob/dev/packages/container/src/footer.vue)[源代码地址 - aside]((https:.

源代码地址-collapse-transitionversion:element-plus 1.0.1-beta.0<template> <transition v-on="on"> <slot></slot> </transition></template><script lang='ts'>import { addClass, removeClass } from '@element-.

源代码地址-collapse源代码地址-collapse-itemversion:element-plus 1.0.1-beta.0collapse<template> <div class="el-collapse" role="tablist" aria-multiselectable="true"> <slot></slot> </div></template><script lang=.

源代码地址-row源代码地址-colversion:element-plus 1.0.1-beta.0row/* * @Description: * @Author: huxianc * @Date: 2020-12-01 09:39:53 * @LastEditors: huxianc * @LastEditTime: 2020-12-21 11:47:29 */import { defineComponent, computed, h, provide } from 'vu.

源代码地址-checkbox源代码地址-checkbox-group源代码地址-checkbox-buttonversion:element-plus 1.0.1-beta.0checkbox<template> <label :id="id" class="el-checkbox" :class="[ border && checkboxSize ? 'el-checkbox--' + checkboxSize :.

version:2.13.2element-ui官方文档地址 - 表单一行多个input框需要表单验证 <el-form-item label="活动时间" required> <el-col :span="11"> <el-form-item prop="date1"> <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1".

main源代码地址item源代码地址version:element-plus 1.0.1-beta.0item<template> <div v-show="data.ready" class="el-carousel__item" :class="{ 'is-active': data.active, 'el-carousel__item--card': type === 'card', 'is-in-sta.

源代码地址version:element-plus 1.0.1-beta.0<template> <div> <div class="el-card" :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'"> <!-- header 插槽 --> <!-- 这里具名插槽优先级高于属性方式 --> <div v.

源代码地址version:1.0.1-beta.0<template> <button :class="[ 'el-button', type ? 'el-button--' + type : '', buttonSize ? 'el-button--' + buttonSize : '', { 'is-disabled': buttonDisabled, 'is-loading': l.

父组件地址<template> <div ref="breadcrumb" class="el-breadcrumb" aria-label="Breadcrumb" role="navigation" > <!-- 默认插槽 --> <slot></slot> </div></template><script lang="ts">impo.

源代码地址<template> <div class="el-badge"> <!-- 默认插槽 --> <slot></slot> <!-- badge内容 --> <transition name="el-zoom-in-center"> <sup v-show="!hidden && (content || content ==.

源代码地址<template> <transition name="el-fade-in"> <div v-if="visible" :style="{ 'right': styleRight, 'bottom': styleBottom }" class="el-backtop" @click.stop="handleClick" > &lt.

源代码地址<template> <span :class="avatarClass" :style="sizeStyle"> <!-- 先判断是否有 src 地址，有再判断是否加载成功 --> <img v-if="(src || srcSet) && !hasLoadError" :src="src" :alt="alt" :srcset="srcSet" :st.

源代码地址el-alert比较简单<template> <transition name="el-alert-fade"> <div v-show="visible" class="el-alert" :class="[typeClass, center ? 'is-center' : '', 'is-' + effect]" role="alert" > <i v-if="sh.

源代码let hiddenTextarea// 隐藏的textarea样式const HIDDEN_STYLE = ` height:0 !important; visibility:hidden !important; overflow:hidden !important; position:absolute !important; z-index:-1000 !important; top:0 !important; right:0 !important;`c.

统一格式，如果后面要修改会方便很多<template> <el-dialog :visible.sync="visibleDialog" v-bind="$attrs" v-on="$listeners" :width="width" center > <slot></slot> <template #footer> <el-button type="primary" @click="

分页如果查询条件变更 查到数据为空，这个时候改变查询条件 查出数据后 page 不高亮解决方案 .sync 修饰符:current-page.sync="params.curpage"tabs如果使用了懒加载(让 echarts 的生成动画出现)，如果 el-tab-pane 中的内容时引入的 而引入的内容中使用了作用域插槽，那么会报错循环调用组件时，组件比 vue 实例后创建，官方文档里写组件必须先于实例化引入，所以说组件没有正确的引入解决方案: main.js 将页面引入然后进行注