import { onDeactivated, watch, onActivated } from 'vue'
import { useWindowScroll } from '@vueuse/core'
import { useState } from '@/hooks'

export default function () {
  const { scrollTop, scrollLeft } = (function () {
    const { x, y } = useWindowScroll()
    return { scrollTop: y, scrollLeft: x }
  })()

  const [scrollTopCache, setScrollTopCache] = useState(0)
  const [isScrollTopSet, setIsScrollTopSet] = useState(false)

  watch(scrollTop, (value) => {
    if (!isScrollTopSet.value) return
    setScrollTopCache(value)
  })

  onActivated(() => {
    window.scrollTo(scrollLeft.value ?? 0, scrollTopCache.value)
    setIsScrollTopSet(true)
  })

  onDeactivated(() => {
    setIsScrollTopSet(false)
  })
}

**王小美** · Jul 30, 2021, 03:55

王小美 boosted

**Arknights** @[email protected] · Jul 30, 2021, 03:55

Jul 30, 2021, 03:55

Arknights @[email protected]

523b117d2a7f65620b58b9a1be754a8e4b3b5f041be96b1cb68aba32be344039.jpg

**王小美** · Jul 29, 2021, 20:09

王小美 boosted

**stux⚡** @[email protected] · Jul 29, 2021, 20:09

Jul 29, 2021, 20:09

stux⚡ @[email protected]

sup, nice and dark

4e3ae36f5044bff3.png

**王小美** · Jul 29, 2021, 23:11

王小美 boosted

**masonlin** @[email protected] · Jul 29, 2021, 23:11

Jul 29, 2021, 23:11

masonlin @[email protected]

早晨趴一趴，看一看小鸟。

09d45b921c8ac5dc.jpg

**王小美** · Jul 29, 2021, 23:35

王小美 boosted

**Arknights** @[email protected] · Jul 29, 2021, 23:35

Jul 29, 2021, 23:35

Arknights @[email protected]

7818c355bfd01ef4404c064ef58cb5cb73c086244374040e202a47ecc26d9b6f.jpg

**王小美** · Jul 29, 2021, 23:40

王小美 boosted

**ExplosionBot** @[email protected] · Jul 29, 2021, 23:40

Jul 29, 2021, 23:40

ExplosionBot @[email protected]

#Konosuba #Megumin

340fa288e4398cb43034ca8a8623114b93471d0536330227bf082918454d6b4a.jpg

**王小美** · Jul 29, 2021, 23:55

王小美 boosted

**Arknights** @[email protected] · Jul 29, 2021, 23:55

Jul 29, 2021, 23:55

Arknights @[email protected]

6c2bf59e60ec4a2c74e9e922225e43893300c9c56dd1aff86a608152bb3ff5f5.jpg

**王小美** @[email protected] · Jul 29, 2021, 16:53

**王小美** @[email protected] · Jul 29, 2021, 16:53

Jul 29, 2021, 16:53

王小美 @[email protected]

等了三年终于返场了，阿离是我玩的最多的一个英雄，可惜今年那个牛年限定皮肤的手感不好，创造营那个bulinbulin的不舒服，花间舞嘛，用了上千局，确实有点腻了

73a288815d926b3d.jpeg

**王小美** · Jul 29, 2021, 15:11

王小美 boosted

**Arknights_EN** @[email protected] · Jul 29, 2021, 15:11

Jul 29, 2021, 15:11

Arknights_EN @[email protected]

Congratulations to Day 3's winners @ElySimpTq, @Wolfthedark15! Please send the required information to [email protected]. Retweet the original post each day and you might have a chance to win all the rewards!
#ArknightsCelebration #Arknights #Yostar
Arknights_EN: Dear Doctor, we're holding a giveaway event to celebrate Arknights' 1.5 anniversary. Retweet this post with your wish (words or images) for Arknights and 2 tags: #ArknightsCelebration #Arknights, and you will get a chance to win the following rewards!
#Yostar

https://twitter.com/ArknightsEN/status/1420745932077928448

E7NNKEPVEAcFnmZ?format=jpg&name=orig

**王小美** @[email protected] · Jul 28, 2021, 16:18

**王小美** @[email protected] · Jul 28, 2021, 16:18

Jul 28, 2021, 16:18

王小美 @[email protected]

我要被雷电将军打哭了

40716131c96080af.jpg

**王小美** @[email protected] · Jul 28, 2021, 10:04

**王小美** @[email protected] · Jul 28, 2021, 10:04

Jul 28, 2021, 10:04

王小美 @[email protected]

Update

@use 'sass:math';
@mixin _flex-gap($gap, $row: true, $wrap: false) {
  $margin: math.div($gap, 2);
  $transform: calc(#{$margin} * -1);
  $size: calc(100% + #{$margin} * 2);
  @if $row {
    margin-left: #{$transform};
    width: #{$size};
  } @else {
    margin-top: #{$transform};
    height: #{$size};
  }
  > * {
    @if $row {
      margin-left: $margin;
      margin-right: $margin;
    } @else {
      margin-top: $margin;
      margin-bottom: $margin;
    }
  }
}

@mixin flex-gap($gap, $flex-flow: 'row nowrap') {
  @if $flex-flow== 'row nowrap' or $flex-flow== 'row-reverse nowrap' {
    @include _flex-gap($gap, true);
  } @else if $flex-flow== 'column nowrap' or $flex-flow== 'column-reverse nowrap' {
    @include _flex-gap($gap, false);
  } @else {
    @include _flex-gap($gap, true, true);
    @include _flex-gap($gap, false, true);
  }
}

Show thread

**王小美** @[email protected] · Jul 28, 2021, 08:15

**王小美** @[email protected] · Jul 28, 2021, 08:15

Jul 28, 2021, 08:15

王小美 @[email protected]

Can i use flexbox-gap

Plus: the latest Edge on Android 11 doesn’t support.

f0b47011a4b31a8a.png

Show thread

**王小美** · Jul 28, 2021, 03:30

王小美 boosted

**明日方舟** @[email protected] · Jul 28, 2021, 03:30

Jul 28, 2021, 03:30

明日方舟 @[email protected]

#明日方舟
【新增服饰】
//轻风 LB01 - 红
MARTHE [珊瑚海岸/CoralCoast]轻风系列泳衣首发01款。基于整体性考量设计的泳装冲锋衣套组，必定能满足您在水边的运动着衣需求。

_____________
狩猎水里的猎物需要些新装备，红正在尝试使用它们。

https://t.bilibili.com/552350717164877975

**王小美** @[email protected] · Jul 28, 2021, 08:09

**王小美** @[email protected] · Jul 28, 2021, 08:09

Jul 28, 2021, 08:09

王小美 @[email protected]

Flex gap mixins:

@use 'sass:math';
@mixin flex-gap($gap, $row: true, $reverse: false) {
  $margin: math.div($gap, 2);
  > * {
    @if $row {
      margin-left: $margin;
      margin-right: $margin;
      &:first-child {
        @if $reverse {
          margin-right: 0;
        } @else {
          margin-left: 0;
        }
      }
      &:last-child {
        @if $reverse {
          margin-left: 0;
        } @else {
          margin-right: 0;
        }
      }
    } @else {
      margin-top: $margin;
      margin-bottom: $margin;
      &:first-child {
        @if $reverse {
          margin-bottom: 0;
        } @else {
          margin-top: 0;
        }
      }
      &:last-child {
        @if $reverse {
          margin-top: 0;
        } @else {
          margin-bottom: 0;
        }
      }
    }
  }
}

**王小美** @[email protected] · Jul 28, 2021, 03:36

**王小美** @[email protected] · Jul 28, 2021, 03:36

Jul 28, 2021, 03:36

王小美 @[email protected]

一个postcss的网格系统插件：Lost Grid

http://lostgrid.org

**王小美** @[email protected] · Jul 27, 2021, 16:15

**王小美** @[email protected] · Jul 27, 2021, 16:15

Jul 27, 2021, 16:15

王小美 @[email protected]

今天在edge上发现flex box里面的gap没有生效，才注意到gap其实是grid布局的属性，只有部分浏览器支持flex gap。有一个PostCSS的polyfill（基于margin实现，本质上还是和真正的gap有一定差距）： https://www.npmjs.com/package/flex-gap-polyfill