# Fixed Bug
##### 遇到的 Bug 與解決的方式

1. firefox 使用 flex:1 無法有效果(input)
firefox 瀏覽器上的 input 使用 flex:1, 會沒效果
建議在該 input 的樣式上, 多寫 ```min-with: 1px;```

# Share Code
##### 分享不錯的寫法

### CSS
* CSS3的新層性pointer-events，就可讓滑鼠穿牆，直接點選到下層的區塊
`pointer-events: none;`

* html select option 内容居中
`text-align-last:center;`
> https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-align-last

### CSS 各種濾鏡
> http://blog.shihshih.com/css-filter/

### mixin
* 設定寬高

@mixin size($w, $h: $w) {
  width: $w;
  height: $h;
}

### 置中方法

@mixin container-center() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

@mixin container-v-center() {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

@mixin position-center {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

### Scroll Snap

# Javascript

### 遇到兩個 foreach

updateSelectedPlatforms() {
  const newSelectedPlatforms = []

  this.rtpGamTypeCountMapList.forEach(v => {
    this.selectedRtpGamePlatforms.forEach(p => {
      if (p === v.type) {
        newSelectedPlatforms.push(p)
      }
    })
  })
this.$store.commit('gameModule/SELECTED_RTP_GAME_TYPES', newSelectedTypes)
},

可以用 reduce 改寫

updateSelectedPlatforms() {
  this.$store.commit(
    'gameModule/SELECTED_RTP_GAME_PLATFORMS',
    this.selectedRtpGamePlatforms.reduce((pre, cur) => {
      if (
        this.rtpGamePlatformCountMapList
          .map(
            filterRtpGamePlatformCountMap =>
              filterRtpGamePlatformCountMap.platform
          )
          .includes(cur)
      ) {
        pre.push(cur)
      }
      return pre
    }, [])
  )
},

### 判斷式縮寫

A > B ? false : true
可以轉成
!(A > B)

#### rtp 輪播切換
總數10筆, 切換到第10筆要把右方的按鈕 disabled

原本的寫法是 總數減掉顯示數量的再減一, 然後要小於或等於我切換的次數＋1
太難懂且複雜

修改寫法：
直接總數 要等於切換的次數再加上一開始顯示的數量
this.rtpGameMap[rtpGameMapKey].length === index + this.display

如果總共有10筆, 一開始顯示三筆, 當我切換時會到第四筆
所以才會把 切換次數加上顯示的數量

10 / 4
10 / 5
10 / 6
10 / 7
10 / 8
10 / 9
10 / 10

onBeforeSlideChange(index, rtpGameMapKey) {
      console.log('rtpGameMapKey', this.rtpGameMap[rtpGameMapKey])
      if (this.rtpGameMap[rtpGameMapKey].length > this.display) {
         
        if (
          this.rtpGameMap[rtpGameMapKey].length - (this.display - 1) <=
          index + 1
        ) {
          $(
            `#${this.id} #${rtpGameMapKey} .carousel-3d-controls a.next`
          ).addClass('disabled event-none')
        } else {
          $(
            `#${this.id} #${rtpGameMapKey} .carousel-3d-controls a.next`
          ).removeClass('disabled event-none')
        }
      }
    }

# Vue / Vuex

###### tags: `Bug Fix`