![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
iview
文章平均质量分 51
木有是我
这个作者很懒,什么都没留下…
展开
-
iview/viewUI库组件封装学习——Card
今天看card组件源码,代码行数较多,整体放到最后,感兴趣的朋友可以先大概看后面的代码部分,然后返回阅读内容分析1、该组件相对比较简单,官方文档的四个参数bordered、dis-hover、shadow、padding皆为样式参数,可直接查看官网文档了解样式参数的使用,不过文档中未提及可用的两个参数,分别为title、icon,当组件使用时传title和icon时,系统默认title插槽展示,可以快速设置简单卡片的title样式2、通过插槽使用,该组件包含三个插槽,其中两个具名插槽,一个默认插槽,如文原创 2021-03-05 23:34:56 · 1259 阅读 · 0 评论 -
iview/viewUI库组件封装学习——Affix
基本逻辑:该UI组件是在满足特定条件下触发fixed效果,和css3中得sticky很相近。首先此组件涉及三个主要参数,分别是滚动条的滚动距离scrollTop(window.scrollTop)、组件元素的BoundingClientRect.top 即该组件距离浏览器可视区域的距离,还有组件接收用户参数offsetTop的值,如何保证元素距离可视区顶部为offsetTop的值时将元素固定?BoundingClientRect.top的初始值即scrollTop为0时,当我们滚动滚动条时BoundingC原创 2021-03-03 00:26:35 · 818 阅读 · 0 评论 -
iview/viewUI库组件封装学习——button-group
1、button-group组件比较简单,就是单纯的包装多个button的盒子,盒子有三个相关属性size、shape、vertical,size分别对应small、large、default;shape参数对应’circle’, 'circle-outline’两个参数,vertical 为boolean类型的参数,上述三个参数都是通过计算属性的class来影响样式展示,源码如下:<template> <div :class="classes"> <原创 2021-02-26 23:18:12 · 782 阅读 · 0 评论 -
iview/viewUI库组件封装学习——button
代码部分<template> <component :is="tagName" :class="classes" :disabled="disabled" @click="handleClickLink" v-bind="tagProps"> <Icon class="ivu-load-loop" type="ios-loading" v-if="loading"></Icon> <Icon :type="ico原创 2021-02-25 00:18:38 · 803 阅读 · 0 评论 -
iview/viewUI库组件封装学习——icon
致力于提升组件封装思路,向iview组件库贡献大神学习day01:icon组件先上源码,然后总结使用方法和亮点学习<template> <i :class="classes" :style="styles" @click="handleClick"></i></template><script> const prefixCls = 'ivu-icon'; export default { name:原创 2021-02-23 22:48:39 · 1210 阅读 · 0 评论