1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

import {defineComponent, onMounted, onUnmounted,} from 'vue';

// props
const BlogBodyProps = {
  isSHow: Boolean
};

export default defineComponent({
  props: BlogBodyProps,
  emits: ['showHeaderFooter'],
  setup(props, ctx) {
    const main = ref();

    const oldScrollTop = ref(0);

    // 判断滚动方向 显示/隐藏 回调
    const scrollingCB = () => {
      // 滚动条距文档顶部的距离（做兼容处理）
      // 注意是对象 document.documentElement 的属性 scrollTop
      // 监听 window.document 的元素 documentElement.scrollTop 属性值变化
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      // 滚动条滚动的距离
      const scrollStep = scrollTop - oldScrollTop.value;
      // 更新——滚动前，滚动条距文档顶部的距离
      oldScrollTop.value = scrollTop;
      // 关键 scrollStep 为正 向下 隐藏导航栏；
      // 为负 向上 显示导航栏
      scrollStep < 0
        ? (ctx.emit('showHeaderFooter', true))
        : (ctx.emit('showHeaderFooter', false));
    };

    onMounted(() => {
      window.document.addEventListener('scroll', scrollingCB);
    });

    onUnmounted(() => {
      window.document.removeEventListener('scroll', scrollingCB);
    });

    return {
      main,
    };
  },
  render() {
    return (
      <main ref={(el) => this.main = el}>
        <router-view/>
      </main>
    );
  }

});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

/*
* window.requestAnimationFrame() 告诉浏览器希望执行一个动画，
* 并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
* 该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
* requestAnimationFrame：优势：由系统决定回调函数的执行时机
* 60Hz的刷新频率，那么每次刷新的间隔中会执行一次回调函数，不会引起丢帧，不会卡顿
* */
export const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

import dayjs from 'dayjs';

export const friendlyDate = (dataStr: string | Date): string => {
  let dateObj = (typeof dataStr === 'object') ? dataStr : new Date(dataStr);
  let time = dateObj.getTime();
  let now = Date.now();
  let space = now - time;
  /*
  let str = '';
    switch (true) {
      case space < 60000:
        str = '刚刚';
        break;
      case space < 1000 * 3600:
        str = Math.floor(space / 60000) + '分钟前';
        break;
      case space < 1000 * 3600 * 24:
        str = Math.floor(space / (1000 * 3600)) + '小时前';
        break;
      default:
        str = Math.floor(space / (1000 * 3600 * 24)) + '天前';
    }
    return str;*/

  const dateMark = {
    [`${space >= 1000 * 3600 * 24 * 30}`]: () => `${dayjs(dataStr).format('YYYY-MM-DD')}`,
    [`${space < 1000 * 3600 * 24 * 30}`]: () => `${Math.floor(space / (1000 * 3600 * 24))}天前`,
    [`${space < 1000 * 3600 * 24}`]: () => `${Math.floor(space / (1000 * 3600))}小时前`,
    [`${space < 1000 * 3600}`]: () => `${Math.floor(space / 60000)}分钟前`,
    [`${space < 60000}`]: () => '刚刚',
  };

  if (typeof dataStr === 'object') {
    return dataStr.toISOString();
  }

  return dateMark['true']();
};

1
2
3
4
5
6

createdAt.value = beautifyDate(blogCreatedAt);

//...
<span class={blogIndex.date}>
  {`${beautifyDate(createdAt)}`} {/* 美化时间显示 */}
</span>