记录读element源码收货=＞持续更新

最新推荐文章于 2024-07-21 10:17:51 发布

潘潘同学

最新推荐文章于 2024-07-21 10:17:51 发布

阅读量123

点赞数

文章标签： javascript vue.js es6

本文链接：https://blog.csdn.net/weixin_46391646/article/details/111830936

版权

button

按钮感觉没什么好说的，就是接受参数加类名改改样式就行

css

box-sizing : border-box / content-box
border-box：元素的高包括padding 和 border
content-box: 元素本身的高
with-space:nowarp : 如何处理元素的空白 nowarp表示会合并不会换行
cursor:pointer / not-allowed 小手和禁用
outline:none 当鼠标点击或者获取焦点的时候这个元素会出现一个边框这个边框就是outline
.pcy-btn + .pcy-btn {margin-right：10px} 兄弟选择符文同级且相邻表示给.pcy-btn后面的所有.pcy-btn加上这个样式
[ class *= pcy-icon- ] + span {color:red} 表示class包含pcy-icon- 下的span添加color
div p:not(:firsh-child){color:red} div下面的p 除了第一个p 其他的都加color
.aaa .bbb{} 表示aaa 下面的 bbb
.aaa.bbb{} 表示同时拥有.aaa 和 .bbb
10…aaa , .bbb{} 表示拥有.aaa 或者 .abbb

vue

$slots.default 表示出了具名插槽意外的所有内容
$slots.插槽名也可以指定具体的插槽组件内用来接收

//slot复习
//slot的好处:让组件更加灵活 类似于一个接口 让组件有更多的功能
//1.匿名插槽
<slot></slot>//子组件
<xx组件>潘晨阳</xx组件> //slot就可以接收到 潘晨阳
//2.匿名插槽
//子组件
<slot name="aaa"></slot>
<slot name="bbb"></slot>
//父组件
<template v-slot="aaa">
	潘晨阳
</template>
<template v-slot="bbb">
	宋星月
</template>
//在页面中，pcy 和 sxy 的位置 不是有父组件的顺序来决定的，而是有子组件里的slot来决定的，及时我在父组件中吧sxy放上面 pcy放下面  页面中还是pcy在sxy上面
//3.作用域插槽
//我的理解是，在父组件的作用域中，不能直接用子组件里的数据，假设我们有些时候需要使子组件里的某些数据，那么可以使用作用域插槽
//子组件
<slot name="aaa" :data="msg"></slot>
data(){return {msg:"子组件data"}}
//父组件
<template v-slot:aaa="data">
	{{data.msg}} //子组件data
	潘晨阳
</template>

input

vue

$attrs : 是一个对象，包含了父组件中不作为prop被识别的attribute，可以通过v-bind="$attrs"绑定，就比如父组件中input的value，maxlength，placeholder，在子组件里$attrs都可以获取到
关于这些这篇文章讲的还可以，$attrs,$listerners，inheritAttrs
this.$nexttick() 接受一个回调，该回调会延时到dom更新循环之后执行，这个的执行顺序在updated之后的，能获取到最新的domw
关于这些这篇文章讲的还可以，nexttick demo解释
Vue.nextTick用于延迟执行一段代码，它接受2个参数（回调函数和执行回调函数的上下文环境），如果没有提供回调函数，那么将返回promise对象。

css

给边框加过度：transition：border-color .2s cubic-bezier(.645 .045 .355.1)
给图标加动画：

@keyframes  rotaing{
	0%{transform:routerZ(0deg)}
	100%{transform:routerZ(360deg)}
}
#xxx{
	animation:rotaing 2s linear infinite  //动画名 完成时间 运动曲线 循环次数 延时多久完成
}

pointer.evnts：auto / none 可以禁用HTML元素的focus hover active
应用场景1.可以给tabs当前标签+ 2.给按钮加防止一直点击 3.a元素挡了b元素，想出发b元素事件，但是点不到b,可以给a元素加就可以点到b了

js

windows.getcomputedstyle(ele元素).getpropetyvalue(“属性”)

<style>
   #elem-container{
   position: absolute;
   left:     100px;
   top:      200px;
   height:   100px;
 }
</style>
<body>
  <div id="elem-container">dummy</div>
  <div id="output"></div>
</body>
<script>
   function getTheStyle(){
    let elem = document.getElementById("elem-container");
    console.log(elem);
    let theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
    console.log(theCSSprop);//100
    document.getElementById("output").innerHTML = theCSSprop;
   }
  getTheStyle();
 </script>

this.getInput().setSelectionRange(-1,-1); 可以从一个focus的input元素中选定特定的范围的内容 //第一个开始位置第二个结束位置表示开始和结束都在最后，所以input在被选中的时候，光标会在最后

组件实现逻辑

清楚按钮: 外部传递clearable，通过clearbale来判断加不加pcy-input–suffix类名，通过clearshow()来控制显示不显示清除按钮，clearshow必须满足1.clearable 2.disabled不为true 3.不是只读 4.input的值补位空 5.focus的时候或者划过的时候第五点他通过@mouseenter=“hovering = true” @mouseleave=“hovering = false” 在子组件定义一个flag来控制他是否划过input 五点都满足才显示
密码按钮：实现逻辑和清楚按钮差不多，type = pass-word?（passwordvisible?‘text’:“password”）: " text" ,判断外界传递过来password了吗，传递了我在判断内部属性passwordvisible是否可见，可见text，不可见密码，没传递我text
autosize :textarea框的高度，通过监听value / type，每次变化都调用resizeTextarea，resizeTextarea这个方法，调用方法会返回值，将这个值赋值给组件内部的一个变量，然后将这个变量赋值给textarea组件 :style="textareaCalcStyle"的方式

潘潘同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记录读element源码收货=＞持续更新

button按钮感觉没什么好说的，就是接受参数加类名改改样式就行cssbox-sizing : border-box / content-boxborder-box：元素的高包括padding 和 bordercontent-box: 元素本身的高with-space:nowarp
复制链接

扫一扫