uniapp中使用picker_如何實作 Vue 自定義元件中 hover 事件以及 vmodel

在CSS中，很容易在滑鼠

hover

時進行更改，隻需：

1
           

在Vue中，它會變得更複雜一些，因為我們沒有内置這個功能。我們必須自己實作這些。不過别擔心，工作量不是很大。

監聽正确的事件

那麼，我們需要監聽哪些事件？

我們想知道什麼時候滑鼠懸停在元素上，這可以通過跟蹤滑鼠何時進入元素以及何時離開元素來确定。為了跟蹤滑鼠何時離開，可以使用

mouseleave

事件。

檢測滑鼠何時進入可以通過相應的

mouseenter

事件來完成，但是我們不使用這個。

原因是在深度嵌套 DOM 樹上使用

mouseenter

時可能會出現嚴重的性能問題。這是因為

mouseenter

向輸入的元素以及每個單獨的祖先元素觸發一個唯一的事件。

那我們會用什麼來代替呢？

我們使用

mouseover

事件。

二者的本質差別在于,

mouseenter

不會冒泡,簡單的說,它不會被它本身的子元素的狀态影響到.但是

mouseover

就會被它的子元素影響到,在觸發子元素的時候,

mouseover

會冒泡觸發它的父元素.(想要阻止

mouseover

的冒泡事件就用

mouseenter

)

為了把知識點串聯起來，我們使用Vue 事件偵聽滑鼠進入和離開時的狀态，并相應地更新狀态。

1
           

現在通過變量

hover

就可以響應滑鼠的進入和移出。

在滑鼠懸停時顯示一個元素

如果希望顯示基于懸停狀态的元素，可以将其與

v-if

指令配對

1
           

滑鼠懸停時切換樣式類

還可以做類似的事情來切換類

1<
           

雖然這是可行的，但不是最好的解決方案。

對于這種情況，最好使用CSS

1
           

将滑鼠懸停在一個Vue元件上

如果你想要使用一個Vue元件來實作這種行為，那麼我們需要做一些輕微的修改。我們不能像以前那樣聽

mouseover

和

mouseleave

事件。

如果Vue元件不發出那些事件，那麼我們就不能監聽它們。

相反，我們可以添加

.native

事件修飾符來直接監聽定制Vue元件上的DOM事件。

1
           

使用

.native

，我們偵聽本地DOM事件，而不是從Vue元件發出的事件。

接着我們來看看如何在自定義元件中 實作

v-model

。

雖然

v-model

是向普通元件添加雙向資料綁定的強大功能，但是如何向自己的自定義元件添加對

v-model

的支援并不總是那麼容易，但其實很簡單。

v-model  介紹

要了解如何在元件中實作

v-model

支援，需要了解它是如何工作的。雖然看起來很神奇，但

v-model= syncedProp

實際上是一個非常簡單的簡寫:

value= syncedProp @input= syncedProp = arguments[0]

(或者

value= syncedProp @input= syncedProp = $event.target

)。

是以，要與

v-model

相容，你的元件需要做的就是接受

:value

屬性，并在使用者更改值時發出

@input

事件。

基礎事例

假設有一個日期選擇器元件，該元件在一個對象中接受

month

和

year

的值，格式為：

{month：1，year：2017}

。該元件需要傳入兩個屬性值

month

和

year

，，并通過

v-model

更新綁定對象。

1
           

使用方式：

1// WrapperComponent.vue
           

如上所看到的，它隻是接受一個

:value

屬性并發出一個帶有更新日期的

@input

事件，一點也不複雜

進階用法

通過使用一個或多個計算屬性，我們可以将輸入資料(如字元串)反規範化為輸入元素更容易處理的格式。這通常與更進階的定制元件一起使用，這些元件必須處理各種可能的輸入格式，比如顔色選擇器。

對于日期選擇器示例，假設日期傳遞的格式是

m/yyyy

結構的字元串。通過使用計算屬性(在本例中為

splitDate

)，我們可以将輸入字元串拆分為具有

month

和

year

屬性的對象，同時僅對日期選擇器元件進行最少的修改。

1
           

一旦熟悉了這裡介紹的概念，可能會發現自己對任何和每個我們建立的接受使用者輸入的元件都使用了

v-model

。這是在自己的自定義元件中添加雙向資料綁定支援的一種非常簡單但功能強大的方法。

27個CSS面試的高頻考點助力金三銀四

純CSS特效，5分鐘帶你學會制作有個性的滾動條

将多個屬性傳遞給 Vue 元件的幾種方式