❝不管夜晚多么黑暗
黎明总是会到来
❞
前言
一只青蛙，一张嘴，两只耳朵，四条腿
两只青蛙，两张嘴，四只耳朵，八条腿
三只青蛙，...
——————————————————
一只小绵羊，两只小绵羊，三只小绵羊，四只小绵羊，五只...
起来，起来，快起来，准备出发咯！
1 InputNumber
定位布局
- 就算你是内联盒子，就算你再怎么overflow，我想放在哪就在哪，毕竟我是定位
- 定位了不起啊
- Sorry，定位真的了不起，inline见了我就马上变乖，float见了我哪还敢飘，以后我想到哪就到哪，inginging！
代码片段
技巧解析
❝同一套DOM结构，根据样式不同，展示不同界面
❞
左右：left:0;top:0 | right:0;top:0
上下：right:0;top:0 | right:0;bottom:0
高度怎么玩，试试line-height
行高血案 传送门
原生事件
倒计时，10,9,8,7,...
我点
怎么没反应
我点, 我点
怎么还是没反应
我点, 我点, 我点, 我点...
总算抢到了这辆劳斯莱斯
WTF，28辆？？？
代码片段
<el-input
...
@keydown.up.native.prevent="increase"
@keydown.down.native.prevent="decrease"
@blur="handleBlur"
@focus="handleFocus"
@input="handleInput"
@change="handleInputChange">
</el-input>
技巧解析
❝@click组件事件,
❞$emit,$on
@click.native原生DOM事件
下次点击没反应，可千万别着急！！
vue事件系统 传送门
数字精度
- 请保留整数
- 请保留两位小数
- 请保留三位有效数字
上面的题目有没有难倒过你
反正我当时不管三七二十一，交了白卷
代码片段
toPrecision(num, precision) {
...
return parseFloat(
Math.round(num*Math.pow(10, precision))/
Math.pow(10, precision)
);
}
技巧解析
❝(12.345 * 10 ^ 2)四舍五入，再除以(10 ^ 2)，最后得到12.35
❞
两位小数，Number.toFixed
(12.342).toFixed(2) // 12.34
有效数字，Number.toPrecision
(12.345).toPrecision(4) // 12.35
下次不用藏考卷了吧 ^_^
2 focus
混入传参
阿悦，还记得吗？那个微信二维码的姑娘
总不能白加人家微信吧
不一起吃个饭，看个电影啥的，多不好啊
最近《八佰》要上映了，抢票去，嘻嘻！
代码片段
export default function(ref) {
return {
methods: {
focus() {
this.$refs[ref].focus()
}
}
}
}
技巧解析
❝想要加微信，必须先买票
❞
你的票买好了吗？
传入ref，触发该组件的focu事件
赶紧的，先到先得，嘻嘻嘻！
3 repeat-click
自定义指令
服务员，能插下电源吗？
上次去吃饭，恨不得找个地缝钻进去
不就是充个电吗？
既然店里没有充电服务，那咱自己带上充电宝得了,用自己的充电宝充电总可以吧 -_-
代码片段
<span
class="el-input-number__decrease"
role="button"
v-if="controls"
v-repeat-click="decrease"
...
</span>
export default {
bind(el, binding, vnode) {
...
}
};
技巧解析
❝既然没有这个指令，自己造一个就好
❞
形如v-xx就是指令，v-repeat-click，从字面上看，表示重复点击
自定义指令怎么写，传送门发给你
自定义指令 传送门
自定义指令的魅力 传送门
长按事件
谁说长按事件是手机独有的？？
看看下面这个案例，键盘上你也可以按并不动！
代码片段
export default {
bind(el, binding, vnode) {
let interval = null;
let startTime;
const handler = () => vnode.context[binding.expression].apply();
const clear = () => {
if (Date.now() - startTime < 100) {
handler();
}
clearInterval(interval);
interval = null;
};
on(el, 'mousedown', (e) => {
if (e.button !== 0) return;
startTime = Date.now();
once(document, 'mouseup', clear);
clearInterval(interval);
interval = setInterval(handler, 100);
});
}
};
技巧解析
❝鼠标按下，每100ms重复一次
❞
手速党，直接处理，清除重复
贪玩的，慢慢按，一次又一次重复
要是累了，就抬起手指，结束吧
「我总觉得」
「他在我身边呢」
❝我是一只七秒记忆的鱼
带你来一场奇妙的旅行
❞
