Vue開發(fā)必備的操作技巧實(shí)例分析

今天小編給大家分享一下Vue開發(fā)必備的操作技巧實(shí)例分析的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

10年積累的網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有師宗免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

鍵盤事件

• 在 js 中我們通常通過綁定一個(gè)事件，去獲取按鍵的編碼，再通過 event 中的 keyCode 屬性去獲得編碼

• 如果我們需要實(shí)現(xiàn)固定的鍵才能觸發(fā)事件時(shí)就需要不斷的判斷，其實(shí)很麻煩

let button = document.querySelector('button')

button.onkeyup = function (e) {
    console.log(e.key)
    if (e.keyCode == 13) {
        console.log('我是回車鍵')
    }
}

• vue 中給一些常用的按鍵提供了別名，我們只要在事件后加上響應(yīng)的別名即可

• vue 中常見別名有：up/向上箭頭、down/向下箭頭、left/左箭頭、right/右箭頭、space/空格、tab/換行、esc/退出、enter/回車、delete/刪除

// 只有按下回車鍵時(shí)才會執(zhí)行 send 方法

• 對于 Vue 中未提供別名的鍵，可以使用原始的 key 值去綁定，所謂 key 值就是 event.key 所獲得的值

• 如果 key 值是單個(gè)字母的話直接使用即可，如果是由多個(gè)單詞組成的駝峰命名，就需要將其拆開，用 - 連接

// 只有按下q鍵時(shí)才會執(zhí)行send方法


// 只有按下capslock鍵時(shí)才會執(zhí)行send方法

• 對于系統(tǒng)修飾符 ctrl、alt、shift 這些比較復(fù)雜的鍵使用而言，分兩種情況

• 因?yàn)檫@些鍵可以在按住的同時(shí)，去按其他鍵，形成組合快捷鍵

• 當(dāng)觸發(fā)事件為 keydown 時(shí)，我們可以直接按下修飾符即可觸發(fā)

• 當(dāng)觸發(fā)事件為 keyup 時(shí)，按下修飾鍵的同時(shí)要按下其他鍵，再釋放其他鍵，事件才能被觸發(fā)。

// keydown事件時(shí)按下alt鍵時(shí)就會執(zhí)行send方法


// keyup事件時(shí)需要同時(shí)按下組合鍵才會執(zhí)行send方法

• 當(dāng)然我們也可以自定義按鍵別名

• 通過 Vue.config.keyCodes.自定義鍵名=鍵碼 的方式去進(jìn)行定義

// 只有按下回車鍵時(shí)才會執(zhí)行send方法

    
// 13是回車鍵的鍵碼，將他的別名定義為autofelix
Vue.config.keyCodes.autofelix=13

圖片預(yù)覽

• 在項(xiàng)目中我們經(jīng)常需要使用到圖片預(yù)覽，viewerjs 是一款非常炫酷的圖片預(yù)覽插件

• 功能支持包括圖片放大、縮小、旋轉(zhuǎn)、拖拽、切換、拉伸等

• 安裝 viewerjs 擴(kuò)展

npm install viewerjs --save

• 引入并配置功能

//引入
import Vue from 'vue';
import 'viewerjs/dist/viewer.css';
import Viewer from 'v-viewer';

//按需引入
Vue.use(Viewer);

Viewer.setDefaults({
    'inline': true,
    'button': true, //右上角按鈕
    "navbar": true, //底部縮略圖
    "title": true, //當(dāng)前圖片標(biāo)題
    "toolbar": true, //底部工具欄
    "tooltip": true, //顯示縮放百分比
    "movable": true, //是否可以移動
    "zoomable": true, //是否可以縮放
    "rotatable": true, //是否可旋轉(zhuǎn)
    "scalable": true, //是否可翻轉(zhuǎn)
    "transition": true, //使用 CSS3 過度
    "fullscreen": true, //播放時(shí)是否全屏
    "keyboard": true, //是否支持鍵盤
    "url": "data-source",
    ready: function (e) {
        console.log(e.type, '組件以初始化');
    },
    show: function (e) {
        console.log(e.type, '圖片顯示開始');
    },
    shown: function (e) {
        console.log(e.type, '圖片顯示結(jié)束');
    },
    hide: function (e) {
        console.log(e.type, '圖片隱藏完成');
    },
    hidden: function (e) {
        console.log(e.type, '圖片隱藏結(jié)束');
    },
    view: function (e) {
        console.log(e.type, '視圖開始');
    },
    viewed: function (e) {
        console.log(e.type, '視圖結(jié)束');
        // 索引為 1 的圖片旋轉(zhuǎn)20度
        if (e.detail.index === 1) {
            this.viewer.rotate(20);
        }
    },
    zoom: function (e) {
        console.log(e.type, '圖片縮放開始');
    },
    zoomed: function (e) {
        console.log(e.type, '圖片縮放結(jié)束');
    }
})

• 使用圖片預(yù)覽插件

• 單個(gè)圖片使用

• 多個(gè)圖片使用

跑馬燈

• 這是一款好玩的特效技巧

• 比如你在機(jī)場接人時(shí)，可以使用手機(jī)跑馬燈特效，成為人群中最靚的仔

• 跑馬燈特效其實(shí)就是將最前面的文字刪除，添加到最后一個(gè)，這樣就形成了文字移動的效果

    
    
    
        #app {
            padding: 20px;
        }
    



    
        應(yīng)援
        暫停
        
{{ msg }}