Vue進(jìn)階（幺柒肆）：鼠標(biāo)、鍵盤事件

在項(xiàng)目開發(fā)過程中，需要根據(jù)鼠標(biāo)事件進(jìn)行相應(yīng)處理。現(xiàn)予以梳理。

鼠標(biāo)事件如下所示：

點(diǎn)擊事件：

@click //單擊

@dblclick/ /雙擊

@mousedown //按下

@mouseup //抬起

@contextmenu // 鼠標(biāo)右鍵

懸浮事件及觸發(fā)順序：

@mouseover //劃過

@mouseenter //進(jìn)入

@mousemove //移動

@mouseleave //離開

@mouseout //移出

滾動事件：

@mousewheel

鍵盤事件

@keydown // 鍵盤按下時(shí)觸發(fā)

@keyup // 鍵盤彈起

@keypress // 鍵盤按住時(shí)觸發(fā)

獲取按鍵的鍵碼 e.keyCode

此外，方法后面跟keyCode值可以直接綁定鍵盤按鍵。

@keyup.13 // 按回車鍵

@keyup.enter // 回車

@keyup.up // 上鍵

@keyup.down // 下鍵

@keyup.left // 左鍵

@keyup.right // 右鍵

@keyup.delete // 刪除鍵

@keyup.space // 空格

應(yīng)用示例：實(shí)現(xiàn)文字溢出顯示…鼠標(biāo)移入浮層展示全部

實(shí)現(xiàn)邏輯：

將文字放到一個容器中，將容器的樣式（主要是有關(guān)字體的樣式）都設(shè)置為當(dāng)前元素的樣式，然后獲取容器的寬，也就是文字的寬。

如果文字的寬度超過了當(dāng)前元素的寬度，則給溢出隱藏的css樣式 overflow :hidden;text-overflow: ellipsis;white-space: normal

定義鼠標(biāo)移入展示浮層，浮層中顯示全部內(nèi)容，鼠標(biāo)移出銷毀浮層。

通過自定義指令實(shí)現(xiàn)如上思路：

Vue.directive('showTips', { // el {element} 當(dāng)前元素 componentUpdated (el) { const curStyle = window.getComputedStyle(el, '') // 獲取當(dāng)前元素的style const textSpan = document.createElement('span') // 創(chuàng)建一個容器來記錄文字的width // 設(shè)置新容器的字體樣式，確保與當(dāng)前需要隱藏的樣式相同 textSpan.style.fontSize = curStyle.fontSize textSpan.style.fontWeight = curStyle.fontWeight textSpan.style.fontFamily = curStyle.fontFamily // 將容器插入body，如果不插入，offsetWidth為0 document.body.appendChild(textSpan) // 設(shè)置新容器的文字 textSpan.innerHTML = el.innerText // 如果字體元素大于當(dāng)前元素，則需要隱藏 if (textSpan.offsetWidth > el.offsetWidth) { // 給當(dāng)前元素設(shè)置超出隱藏 el.style.overflow = 'hidden' el.style.textOverflow = 'ellipsis' el.style.whiteSpace = 'nowrap' // 鼠標(biāo)移入 el.onmouseenter = function (e) { // 創(chuàng)建浮層元素并設(shè)置樣式 const vcTooltipDom = document.createElement('div') vcTooltipDom.style.cssText = ` max-width:400px; max-height: 400px; overflow: auto; position:absolute; top:${e.clientY + 5}px; left:${e.clientX}px; background: rgba(0, 0 , 0, .6); color:#fff; border-radius:5px; padding:10px; display:inline-block; font-size:12px; z-index:19999 ` // 設(shè)置id方便尋找 vcTooltipDom.setAttribute('id', 'vc-tooltip') // 將浮層插入到body中 document.body.appendChild(vcTooltipDom) // 浮層中的文字 document.getElementById('vc-tooltip').innerHTML = el.innerText } // 鼠標(biāo)移出 el.onmouseleave = function () { // 找到浮層元素并移出 const vcTooltipDom = document.getElementById('vc-tooltip') vcTooltipDom && document.body.removeChild(vcTooltipDom) } } // 記得移除剛剛創(chuàng)建的記錄文字的容器 document.body.removeChild(textSpan) }, // 指令與元素解綁時(shí) unbind () { // 找到浮層元素并移除 const vcTooltipDom = document.getElementById('vc-tooltip') vcTooltipDom && document.body.removeChild(vcTooltipDom) } })

使用時(shí)只需要溢出隱藏的元素上直接加上指令 v-show-tips 即可

應(yīng)用示例：ul鼠標(biāo)移動到多個li標(biāo)簽上字體高亮

示例代碼如下：

• {{ item.bnContent }} {{ item.bnDate }} {{ item.bnPublishName }}

data(){ return{ colorHover: 0 } } methods:{ spanHover: function(index) { this.colorHover = index } }

.smart_nav_con{ color:black; position: relative; padding-left: 10px; padding-top: 12px; } .smart_nav_con .smart_index .a_white{ color:black; } .smart_nav_con .smart_index .a_color{ color:#00a0e9; } .smart_nav_con li a{ color:black; } .smart_nav_con .smart_index a{ color:#00a0e9; } .bnContentCss{ font-size: 14px; color: #666666; width: 60%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display: inline-block } .bnDateCss{ font-size: 14px; color: #9b9b9b; display: inline-block; float: right; margin-right: 13px; } .bnPublishNameCss{ font-size: 14px; color: #82796f; display:inline-block; float: right; position: relative; right: 15px; } .ulCss{ list-style: none; padding-left: 10px; padding-top: 8px; color:#fff; }

效果如下：

應(yīng)用示例：移動到元素上對應(yīng)改變背景色

• {{ item.bnTitle }} {{ item.bnContent }}

data(){ return{ active: 0, } } methods:{ mouseOver: function(index) { this.active = index }, mouseLeave: function(index) { this.active = index } }

.smart_index{ background-color: #F5F5F5; } .a_white{ background-color: #ffffff; }

效果如下：

HTTP Vue 容器

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。