Vue 小技術小工具園地

文章目的

有鑑於現在在練習利用 Vue 開發電商網站，中間會發現一些前端前輩提供的好用程式碼，或是一些好用的套件、工具，想透過此文章記錄下來，方便以後回憶查找。
若陸續發現好用的工具與程式碼會持續更新，或許會出好幾回XD

Vue Awesome Swiper 讓 Vue 輕鬆使用輪播功能

Vue Awesome Swiper 是一個提供 Vue 能使用輪播功能的套件，我們只需做簡單的安裝與引用就可以達到效果。

安裝與引用套件

在終端機輸入 npm install vue-awesome-swiper --save 進行安裝。
此套件可以做全域與區域的引用，這邊我們要介紹如何全域引用它，來到進入點(main.js)，在裡面輸入以下程式碼：
1
2
3
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
進行到這邊我們已完成安裝與引用的動作，接下來就是使用它。
Vue Awesome Swiper 使用方法
在需要使用的 Vue 元件 html 部分載入以下程式碼：
1
2
3
4
5
<swiper :options="swiperOption">
<swiper-slide><img src="..."></swiper-slide>
<swiper-slide><img src="..."></swiper-slide>
<swiper-slide><img src="..."></swiper-slide>
</swiper>
每一個 swiper-slide 就是一張輪播圖片，裡面不一定要使用 img 也可以使用 background-image 方式去設定圖片。
swiper 綁定的 options 提供我們對輪播的參數設定。

來到 js 部分對輪播做一些簡單設定與介紹，程式碼如下：

export default {
name: 'carousel',
data () {
  return {
    swiperOption: {
      autoplay: {
        delay: 2500, /*自動輪播間格時間*/
        disableOnInteraction: false /*使用者拖曳輪播時是否取消自動輪播*/
      },
      loop: true, /*是否重複輪播*/
      effect: 'fade' /*輪播顯示效果(預設為slide)*/
      }
    }
  }
}

這邊只做一些簡單的介紹，若需要其他額外效果或了解其他參數，這邊附上我找到的相關文章，另外基本上參數部分都與 swiper 這個套件相同。
參數與效果示範
swiper官方文件
Vue Awesome Swiper官方文件

Vue Filter 金錢格式程式碼(currency)

有時候我們會需要將數字轉換成金錢的格式，像是加入千分號及錢字號，這邊提供一個 js 程式碼，方便套用至 Vue filter 就可以輕鬆轉換格式。

export default function (num) {
  const n = Number(num)
  return `$${n.toFixed(0).replace(/./g, (c, i, a) => {
    const currency = (i && c !== '.' && ((a.length - i) % 3 === 0) ? `, ${c}`.replace(/\s/g, '') : c)
    return currency
  })}`
}

Vue filter 日期格式程式碼(date)

在我們抓取日期時，基本上後端抓來的日期都會是 Timestamp 格式，這邊提供將 Timestamp 轉換成一般時間格式的程式碼，方便使用在 Vue filter 裡。

export default function (time) {
  const date = new Date(time * 1000)
  return date.toLocaleDateString()
}

Vue 簡單搭配 localStorage 寫法

有時候我們在寫網頁的時候，會需要用到 localStorage 來幫助我們儲存一些資料，這邊將介紹簡單的 Vue localStorage 寫法。

一樣的我們先為需要儲存的資料變數下以下語法，來抓取 localStorage 的資料：

data () {
   return {
     變數名稱: JSON.parse(localStorage.getItem('localStorage名稱')) || [],
   }
 }

*這邊有很重要的一點是 JSON.parse 與空陣列的順序不能對調，不然抓取資料時會有錯誤!!!**

接著我們可以下 watch 語法來監聽這個變數的資料變化，當資料一產生變化就儲存到 localStorage 裡，程式碼如下：

watch: {
   上一步驟的變數名: {
     handler () {
       let storageName = 'localStorage名稱'
       localStorage.setItem(storageName, JSON.stringify(this.上一步驟的變數名))
     },
     deep: true
   }
 }

進行到這裡，我們就可以順利的儲存我們監聽的資料到 localStorage 中囉。

當動態路由改變時該如何讓畫面重新渲染？

什麼時候會發生這情況呢？目前筆者遇到這情況是已經在某一個動態路徑底下，在這路徑下我想切換到另一個動態路徑，但因為元件模組是相同的，因此我們沒做監視的話，畫面是不會重新渲染的。
這時候需要用到我們 Vue 的 watch 功能，用 watch 來監視我們動態路由，當路由改變就執行一些指令讓畫面重新渲染。
程式碼如下：

watch: {
  $route: {
    handler () {
      this.productId = this.$route.params.Id
      this.getDetail()
    }
  }
}

此段程式碼中我們監視 $route ，當它發生變化時我們就重新抓取它改變後的路徑名，並儲存起來，方便後面的函數執行重新抓取資料，進而重新渲染畫面。

參考資料

切換 router 時讓新畫面可以回到畫面最上層

我們知道 vue 在切換 router 時會因為 SPA 的特性讓新渲染的畫面位置停留在使用者之前的滾動位置，那如果我們想要將新畫面渲染後位置回到頂層該怎麼做呢？
我們來到 router 資料夾裡的 index.js 檔案，並在下列部分加入新程式碼：

const router = new VueRouter({
  routes,
  /*新增這段程式碼讓畫面切換可以回到頂層*/
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

這樣子我們切換畫面時，畫面就會自動回到頂層囉!!

參考資料

Vue-range-slider 輕鬆在 vue 中使用滑動工具

因為筆者最近開發的網頁需要用到 slider 的效果，但因為開發環境是 NUXT + Vue 很多套件在使用上都會遇到莫名的 bug，最後終於找到適合的套件，想在這邊做個紀錄。
如果我們在 google 關鍵字打上 slider、vue slider 等，跳出來的套件會有 jquery ui slider 與 vue-range-slider，兩者筆者都有嘗試但都踩到雷。

雷點

jquery 部分在使用 v-model 的雙向綁定時會有些問題，會建議在開發 Vue 時能不用 jquery 就不使用，避免不必要的衝突。
vue-range-slider 則是會有兩個套件分別是 vue-range-component 和 vue-range-slider，強烈建議安裝 vue-range-slider，因為 vue-range-component 使用時會出現 bug，且在 NUXT 中引用會稍微麻煩。

vue-range-slider 使用方法

這邊我們就來介紹一下此套件的使用方法，這邊附上連結—vue-range-slider。
基本上就按照連結裡的步驟去做應該就能正確使用，筆者這邊要說的是自定義style部分，若我們需要自定義 style，打開 node_modules 裡的 vue-range-slider/dist/vue-range-slider.css 這隻檔案並在裡面做 css 的修改。
重點是它還支援 touch device 喔!!!!!!!!
以上就是筆者在使用 sldier 的心得(若你沒有用框架開發的話 jquery ui slider 會是不錯的選擇)。jquery-ui