跟随Element学习Vue小技巧(13)——Select

时间:2020-8-21 作者:admin

跟随Element学习Vue小技巧(13)——Select

只要还有明天今天就永远是起跑线

前言

  • 是我重要,还是游戏重要?
  • 我和你妈同时掉水里了,你先救谁?
  • 是我漂亮,还是前任漂亮?
  • 如果有人给你1亿,让你放弃我,你是选1亿还是选我?

    跟随Element学习Vue小技巧(13)——Select

1 Select

滚动条

吃不完的,可以兜着走
不够花的,可以使劲刷
不够大呢,滚!

跟随Element学习Vue小技巧(13)——Select

代码片段

<el-scrollbar  tag="ul"  ref="scrollbar"  ...  <el-option    :value="query"    created    v-if="showNewOption">  </el-option>  <slot></slot></el-scrollbar>

跟随Element学习Vue小技巧(13)——Select

跟随Element学习Vue小技巧(13)——Select

技巧解析

没想到吧,自带的滚动条,这么好的东西,居然不在组件库里!!
看到没,右方和下方有滚动条样式
那怎么办?
那个胖胖的盒子,还记得吗?
往里缩呗,margin负值, -17px

滚动条美化 传送门

2 SelectDropdown

watch观察

有这样一个人,他的前半生被安排得明明白白,同事,邻居,女友,甚至是父母,都是演员,他的每一分,每一秒都被电视机前的观众看得清清楚楚,想想都觉得很可怕,好在楚门的世界只是电影而已!
观察一个人的每时每刻,终究是令人毛骨悚然的,可是观察程序的一举一动的,貌似还挺有用的

跟随Element学习Vue小技巧(13)——Select

代码片段

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

正则属性

你有什么择偶标准?

  • 有钱
  • 长得帅
  • 能力出众
  • 有担当
  • 会做饭
  • 懂浪漫

这么多要求,茫茫人海怎么找呢?
用正则啊,没有你找不到,只有你想不到!

跟随Element学习Vue小技巧(13)——Select

代码片段

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’
下次,看浏览器还怎么皮!

跟随Element学习Vue小技巧(13)——Select

我想你了

跟随Element学习Vue小技巧(13)——Select

我是一只七秒记忆的鱼带你来一场奇妙的旅行

参考链接

往期回顾

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。