❝只要还有明天
今天就永远是起跑线
❞
前言
- 是我重要，还是游戏重要？
- 我和你妈同时掉水里了，你先救谁？
- 是我漂亮，还是前任漂亮？
- 如果有人给你1亿，让你放弃我，你是选1亿还是选我？
如果是你，你会怎么选？
选择本来就是一件极其困难的事！
不管怎么样，我们还是得做出选择
下定决心了吗？出发！
1 Select
滚动条
吃不完的，可以兜着走
不够花的，可以使劲刷
不够大呢，滚！
怎么滚？
横着滚，还是竖着滚？
爱咋咋滴
代码片段
<el-scrollbar
tag="ul"
ref="scrollbar"
...
<el-option
:value="query"
created
v-if="showNewOption">
</el-option>
<slot></slot>
</el-scrollbar>
技巧解析
❝没想到吧，自带的滚动条，这么好的东西，居然不在组件库里！！
❞
看到没，右方和下方有滚动条样式
那怎么办？
那个胖胖的盒子，还记得吗？
往里缩呗，margin负值, -17px
滚动条美化 传送门
2 SelectDropdown
watch观察
有这样一个人，他的前半生被安排得明明白白，同事，邻居，女友，甚至是父母，都是演员，他的每一分，每一秒都被电视机前的观众看得清清楚楚，想想都觉得很可怕，好在楚门的世界只是电影而已！
观察一个人的每时每刻，终究是令人毛骨悚然的，可是观察程序的一举一动的，貌似还挺有用的
可对程序猿来说，可就苦逼了 ╮(╯▽╰)╭
代码片段
watch: {
currentLabel() {
if (!this.created && !this.select.remote) this.dispatch('ElSelect', 'setSelected');
},
value(val, oldVal) {
const { remote, valueKey } = this.select;
if (!this.created && !remote) {
if (valueKey && typeof val === 'object' && typeof oldVal === 'object' && val[valueKey] === oldVal[valueKey]) {
return;
}
this.dispatch('ElSelect', 'setSelected');
}
}
}
watch: {
'$parent.inputWidth'() {
this.minWidth = this.$parent.$el.getBoundingClientRect().width + 'px';
}
}
技巧解析
❝凡事有因必有果
❞
观察是因，改变是果
y = ax + b, x是因，y是果
观察属性，value
观察对象，$route
观察对象属性，$route.path
$parent.inputWidth, 这样的观察倒是少见, 有点越级了啊！！！
watch使用技巧 传送门
3 util
正则属性
你有什么择偶标准？
- 有钱
- 长得帅
- 能力出众
- 有担当
- 会做饭
- 懂浪漫
...
这么多要求，茫茫人海怎么找呢？
用正则啊，没有你找不到，只有你想不到！
代码片段
export const kebabCase = function(str) {
const hyphenateRE = /([^-])([A-Z])/g;
return str
.replace(hyphenateRE, '$1-$2')
.replace(hyphenateRE, '$1-$2')
.toLowerCase();
};
export const escapeRegexpString = (value = '') =>
String(value).replace(/[|\\{}()[\]^$+*?.]/g, '\\$&')
技巧解析
❝数字，字母，符号
❞
1个，2个，多个
组1，组2，组3
横向匹配用[] [a-z]
纵向匹配用{} {6,12}
分组匹配用() (\d{4})-(\d{2}))
正则表达式简明教程 传送门
今天咱们聊聊正则的几个符号
$1-$9,第1组，...，第9组
$&,最后匹配到的字符串
$',匹配项右侧的字符串
匹配项左侧 传送门
浏览器检测
如果说，
老师最头疼的事，是学生打架
工地最头疼的事，是工人喝酒闹事
那么，前端最头疼事莫过于浏览器的折腾啦
代码片段
export const isIE = function() {
return !Vue.prototype.$isServer && !isNaN(Number(document.documentMode));
};
export const isEdge = function() {
return !Vue.prototype.$isServer && navigator.userAgent.indexOf('Edge') > -1;
};
export const isFirefox = function() {
return !Vue.prototype.$isServer && !!window.navigator.userAgent.match(/firefox/i);
};
技巧解析
❝收下这套工具，让浏览器无所遁形
❞
IE: document.documentMode
Edge: 'Edge'
firefox: 'firefox'
chrome: 'chrome'
下次，看浏览器还怎么皮！
「我想你了」
「可不能对你说」
❝我是一只七秒记忆的鱼
带你来一场奇妙的旅行
❞
