發表文章

vue 和vue-touch 實現移動端左右導航效果（仿京東移動站導航）

-
圖片
使用技術：vue2.0 webpack vue-touch 一些簡單的javascript; （注意:vue-touch 使用的是2.0.0版本 需要與vue2.0.0相容） vue-touch(地址:https://github.com/vuejs/vue-touch 注意是next 分支) 左側導航可滑動（右側檢視窗因為和左邏輯一樣 就沒寫） var VueTouch = require ( 'vue-touch' ) Lib.Vue. use (VueTouch, {name: 'v-touch' }) 通過npm 安裝後vuetouch 後引入 我這裡Lib,是我的一個方法 你也可以 直接Vue.use()引用 {name:'v-touch'} 的作用 宣告一個以vue-touch的標籤 然後 在html內寫一個  <vue-touch></vue-touch> 就可以，當然後面我們要寫入方法; 附:vue-touch方法 因為vue-touch其實封裝了 hammer.js的方法 其實我們這裡介紹的也就是他幾個事件；詳情可以搜尋 hammer.js的文件; hammer.js主要針對觸屏的6大事件進行監聽。如下圖所示： 1、  Pan事件：在指定的dom區域內，一個手指放下並移動事件，即觸屏中的拖動事件。這個事件在屏觸開發中比較常用，如：左拖動、右拖動等，如手要上使用QQ時向右滑動出現功能選單的效果。該事件還可以分別對以下事件進行監聽並處理： Panstart：拖動開始、Panmove：拖動過程、Panend：拖動結束、Pancancel：拖動取消、Panleft：向左拖動、Panright：向右拖動、Panup：向上拖動、Pandown：向下拖動 2、  Pinch事件：在指定的dom區域內，兩個手指（預設為兩個手指，多指觸控需要單獨設定）或多個手指相對（越來越近）移動或相向（越來越遠）移動時事件。該事件事以分別對以下事件進行監聽並處理： Pinchstart：多點觸控開始、Pinchmove：多點觸控過程、Pinchend：多點觸控結束、Pinchcancel：多點觸控取消、Pinchin：多點觸控時兩手指距離越來越近、...
張貼留言
閱讀完整內容

vue-fontawesome

-
vue-fontawesome Font Awesome 5 的官方Vue.js Component Github FortAwesome/vue-fontawesome 安裝 安裝 @fortawesome/fontawesome-svg-core 和 @fortawesome/vue-fontawesome $ npm install @fortawesome/fontawesome-svg-core --save $ npm install @fortawesome/vue-fontawesome --save 再依Free, Pro, Brands, Solid, Regular等Style(樣式種類，請參考 Font Awesome Icons )安裝對應的ICONS套件； 例如： $ npm install @fortawesome/free-solid-svg-icons --save $ npm install @fortawesome/free-regular-svg-icons --save $ npm install @fortawesome/free-brands-svg-icons --save //Pro $ npm install @fortawesome/pro-regular-svg-icons --save 配置 import { library } from '@fortawesome/fontawesome-svg-core' import { faCoffee } from '@fortawesome/free-solid-svg-icons' import { faGooglePlus } from '@fortawesome/free-brands-svg-icons' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' library.add(faCoffee, faGooglePlus); Vue.component( 'font-awesome-icon' , Fon...
張貼留言
閱讀完整內容

如何使用 VS Code 開發 Vue ?

-
圖片
VS Code 是目前最受歡迎的前端開發環境，只要安裝合適的套件，就能在 VS Code 開發 Vue，適合前後端分離時的純前端開發。 Version macOS High Sierra 10.14.2 VS Code 1.30.1 Vue 2.5.21 Vue CLI 3.2.2 Vetur 0.14.4 Prettier 1.7.3 ESLint 1.7.12 Copy Relative Path 0.0.2 Packages Vetur Prettier ESLint Copy Relative Path Vetur 負責 Vue 的 LSP (Language Service Protocol) 角色，是目前支援 Vue 最完整的 LSP。 ESLint 負責 Linter 角色，Vue CLI 3 目前已經整合 ESLint，除了另外下  yarn lint  執行 ESLint 外，更可以在 VS Code 下即時警告。 Prettier 負責 Formatter 角色，當我們按下熱鍵  Ctrl + S  時，會啟動 Prettier 為我們重整 JavaScript / CSS 格式。 Copy Relative Path 在 ECMAScript 2015 中，非常依賴 import module，此 package 可以幫我們自動產生相對路徑。 .eslintrc.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 module .exports = { root: true , env: { node: true , }, extends: [ 'plugin:vue/essential' , 'plugin:prettier/recommended' , '@vue/prettier' , ], rules: { 'no-console' : process.env.NODE_ENV ===...
張貼留言
閱讀完整內容