vue3
huxianc
这个作者很懒,什么都没留下…
展开
-
vue 3 setup 试用
使用的是vue3(v:3.0.5)+ts(v:4.1.3)遇到的问题:defineEmit传入defineEmit一个定义好了string[]的数组变量,会报错,我试着直接传入数组,才不会出问题引入.d.ts文件会报错,在script中定义接口之类的不会报错...原创 2021-01-29 16:12:09 · 204 阅读 · 0 评论 -
element-ui element-plus link - 分析
源代码地址 - linkversion:element-plus 1.0.1-beta.0link组件 相对比较简单<template> <a :class="[ 'el-link', type ? `el-link--${type}` : '', disabled && 'is-disabled', underline && !disabled && 'is-und.原创 2020-12-23 11:38:00 · 1168 阅读 · 0 评论 -
element-ui element-plus infinite-scroll - 分析
源代码地址 - 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.原创 2020-12-23 11:06:17 · 1625 阅读 · 1 评论 -
element-ui element-plus image - 分析
源代码地址 - 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=.原创 2020-12-22 17:31:25 · 1604 阅读 · 1 评论 -
element-ui element-plus drawer - 分析
源代码地址 - 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" > <!.原创 2020-12-22 10:43:05 · 2556 阅读 · 0 评论 -
element-ui element-plus divider - 分析
源代码地址 - dividerversion:element-plus 1.0.1-beta.0<template> <div :class="['el-divider', `el-divider--${direction}`]"> <!-- 水平方向才会显示插槽 --> <div v-if="$slots.default && direction !== 'vertical'" :class=.原创 2020-12-22 09:07:03 · 1007 阅读 · 0 评论 -
element-ui element-plus dialog - 分析
源代码地址 - 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表示元素.原创 2020-12-21 17:50:50 · 3274 阅读 · 0 评论 -
element-ui element-plus trap-focus - 分析
源代码地址 - 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.原创 2020-12-21 16:18:17 · 1027 阅读 · 0 评论 -
element-ui element-plus overlay - 分析
源代码地址 - 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.原创 2020-12-21 15:36:20 · 1460 阅读 · 0 评论 -
element-ui element-plus container header footer aside mian - 分析
源代码地址 - 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:.原创 2020-12-21 15:19:09 · 668 阅读 · 0 评论 -
element-ui element-plus collapse-transition - 分析
源代码地址-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-.原创 2020-12-21 14:55:06 · 1111 阅读 · 0 评论 -
element-ui element-plus collapse - 分析
源代码地址-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=.原创 2020-12-21 14:34:17 · 1184 阅读 · 0 评论 -
element-ui element-plus row col - 分析
源代码地址-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.原创 2020-12-21 12:25:31 · 1147 阅读 · 0 评论 -
element-ui element-plus checkbox - 分析
源代码地址-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 :.原创 2020-12-21 11:37:30 · 2054 阅读 · 0 评论 -
vue3 api 理解和变更
使用api都需要在vue中按需引入refref是响应式数据,可以给定初始值,但是会通过.value来访问,template中可以直接 ref 指向生命周期setup替代了beforeCreate和created两个生命周期函数,理解成它的执行时间在替代的两个生命周期函数之间reactivevue3提供的响应式函数,可以理解成vue 2.x类似的功能,但是是用proxy写的,所以解决了vue 2.x的一些问题($set、数组只有 6 个方法重写等)建议:基本类型值原创 2020-12-11 11:42:21 · 319 阅读 · 1 评论