跟随Element学习Vue小技巧(38)——Tabs前言哥们小马新交了个女朋友，第二天带着她去逛商场，经过一家服装店门

❝
放弃就代表了结束
❞

前言

哥们小马新交了个女朋友，第二天带着她去逛商场，经过一家服装店
门口的女店员惊讶的说一句：“你这么快又换了一个对象呀？”
小马脸一下子红了起来，正想跟女朋友解释
哪知道女朋友尴尬的回应了一句，“是呀”

对象真的有这么好换吗？
要不，咱们也来换换 (￢_￢)瞄开玩笑的啦，(#^.^#)
对象是没得换了，换换Tabs如何？

1 Tabs

跳转拦截 before-leave

此路是我开，
此树是我栽树，
要想从此过，
留下买路财！

代码片段

props: {
  beforeLeave: Function
},

setCurrentName(value) {
  const changeCurrentName = () => {
    this.currentName = value;
    this.$emit('input', value);
  };
  // 传递beforeLeave函数props
  if (this.currentName !== value && this.beforeLeave) {
    const before = this.beforeLeave(value, this.currentName);
    // beforeLeave函数执行返回promise被resolve
    if (before && before.then) {
      before
        .then(() => {
          changeCurrentName();
          this.$refs.nav && this.$refs.nav.removeFocus();
        });
    // beforeLeave函数执行返回true
    } else if (before !== false) {
      changeCurrentName();
    }
  } else {
  // 不传递beforeLeave函数props
    changeCurrentName();
  }
}
},

技巧解析

❝
props命名，小驼峰beforeLeave，传递属性用短线before-leave
emit命名，短线before-leave，触发事件也用短线@before-leave

Prop的大小写传送门
 事件名传送门
❞

❝
本来标签可以自由切换，后来来了一打劫的before-leave，非要收买路财
return true|Promise可以顺利通过
要是返回了false，对不起，原地返回
瞧，还挺给面子的，毕竟没洗劫一空

❞

2.TabNav

标签切换 visibilitychange

小样，你以为攀上浏览器这颗大树，我就治不了你了
瞧我最新的科研成果—visibilitychange, 让你无所遁形

visibilityChangeHandler() {
  const visibility = document.visibilityState;
  if (visibility === 'hidden') {
    this.focusable = false;
  } else if (visibility === 'visible') {
    setTimeout(() => {
      this.focusable = true;
    }, 50);
  }
}

mounted() {
  document.addEventListener('visibilitychange', this.visibilityChangeHandler);
},

beforeDestroy() {
  document.removeEventListener('visibilitychange', this.visibilityChangeHandler);
}

技巧解析

❝
浏览器页签关闭也是可以监听到的
visibilitychange表示监听事件,
document.visibilityState表示页签状态，visible打开，hidden关闭

visibilitychange事件传送门
❞

❝
这里的事件也能监听吗？
是的，可以的，beforeunload

beforeunload事件传送门
❞

3.小工具

首字母大写

/*
* @{desc} 首字母大写
* @{params} str:String
* @{example} 
  firstUpperCase('home') =>Home
*/
const firstUpperCase = str => {
  return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
};

nextTick嵌套

// Tab组件中调用子组件Nav的方法
currentName(value) {
  if (this.$refs.nav) {
    this.$nextTick(() => {
      this.$refs.nav.$nextTick(_ => {
        this.$refs.nav.scrollToActiveTab();
      });
    });
  }
}

「我们即使发了一千次短信」 「心与心之间大概也只能靠近1厘米」

跟随Element学习Vue小技巧(38)——Tabs

放弃就代表了结束

前言

1 Tabs

跳转拦截 before-leave

代码片段

技巧解析

2.TabNav

标签切换 visibilitychange

技巧解析

3.小工具

首字母大写

nextTick嵌套

参考链接

往期回顾