<input id="0qass"><u id="0qass"></u></input>
  • <input id="0qass"><u id="0qass"></u></input>
  • <menu id="0qass"><u id="0qass"></u></menu>

    如何實現 Vue 自定義組件中 hover 事件以及 v-model

    在CSS中,很容易在鼠標hover時進行更改,只需:

    1.item?{
    2??background:?blue;
    3}
    4
    5.item:hover?{
    6??background:?green;
    7}
    

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

    監聽正確的事件

    那么,我們需要監聽哪些事件?

    我們想知道什么時候鼠標懸停在元素上,這可以通過跟蹤鼠標何時進入元素以及何時離開元素來確定。為了跟蹤鼠標何時離開,可以使用mouseleave事件。

    檢測鼠標何時進入可以通過相應的mouseenter事件來完成,但是我們不使用這個。

    原因是在深度嵌套 DOM 樹上使用mouseenter時可能會出現嚴重的性能問題。這是因為mouseenter向輸入的元素以及每個單獨的祖先元素觸發一個唯一的事件。

    那我們會用什么來代替呢?

    我們使用mouseover事件。

    二者的本質區別在于,mouseenter不會冒泡,簡單的說,它不會被它本身的子元素的狀態影響到.但是mouseover就會被它的子元素影響到,在觸發子元素的時候,mouseover會冒泡觸發它的父元素.(想要阻止mouseover的冒泡事件就用mouseenter)

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

     1<template>
     2??<div
     3????@mouseover="hover?=?true"
     4????@mouseleave="hover?=?false"
     5??/>
     6</template>
     7----------------------------------
     8
     9export?default?{
    10??data()?{
    11????return?{
    12??????hover:?false,
    13????};
    14??}
    15}
    

    現在通過變量 hover 就可以響應鼠標的進入和移出。

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

    如果希望顯示基于懸停狀態的元素,可以將其與v-if指令配對

     1<template>
     2??<div>
     3????<span
     4??????@mouseover="hover?=?true"
     5??????@mouseleave="hover?=?false"
     6????>
     7??????鼠標懸停時顯示該內容
     8????</span>
     9????<span?v-if="hover">這里是秘密消息</span>
    10??</div>
    11</template>
    12
    13-------------------------------------------------
    14
    15export?default?{
    16??data()?{
    17????return?{
    18??????hover:?false,
    19????};
    20??}
    21}
    

    鼠標懸停時切換樣式類

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

     1<template>
     2??<div>
     3????<span
     4??????@mouseover="hover?=?true"
     5??????@mouseleave="hover?=?false"
     6??????:class="{?active:?hover?}"
     7????>
     8??????Hover?me?to?change?the?background!
     9????</span>
    10??</div>
    11</template>
    12-------------------------------------------
    13
    14export?default?{
    15??data()?{
    16????return?{
    17??????hover:?false,
    18????};
    19??}
    20}
    21-------------------------------------------
    22
    23.active?{
    24??background:?green;
    25}
    

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

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

     1<template>
     2??<span>
     3????Hover?me?to?change?the?background!
     4??</span>
     5</template>
     6
     7----------------------------------------
     8
     9span:hover?{
    10??background:?green;
    11}
    

    將鼠標懸停在一個Vue組件上

    如果你想要使用一個Vue組件來實現這種行為,那么我們需要做一些輕微的修改。我們不能像以前那樣聽mouseovermouseleave事件。

    如果Vue組件不發出那些事件,那么我們就不能監聽它們。

    相反,我們可以添加.native事件修飾符來直接監聽定制Vue組件上的DOM事件。

     1<template>
     2??<my-custom-component
     3????@mouseover.native="hover?=?true"
     4????@mouseleave.native="hover?=?false"
     5??/>
     6</template>
     7--------------------------------------
     8export?default?{
     9??data()?{
    10????return?{
    11??????hover:?false,
    12????};
    13??}
    14}
    

    使用.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事件。

    基礎事例

    假設有一個日期選擇器組件,該組件在一個對象中接受monthyear的值,格式為:{month:1,year:2017}。該組件需要傳入兩個屬性值 monthyear,,并通過v-model更新綁定對象。

     1//?DatePicker.vue
     2<template>
     3??<div?class="date-picker">
     4????Month:?<input?type="number"?ref="monthPicker"?:value="value.month"?@input="updateDate()"/>
     5????Year:?<input?type="number"?ref="yearPicker"?:value="value.year"?@input="updateDate()"/>
     6??</div>
     7</template>
     8
     9<script>
    10export?default?{
    11??props:?['value'],
    12
    13??methods:?{
    14????updateDate()?{
    15??????this.$emit('input',?{
    16????????month:?+this.$refs.monthPicker.value,
    17????????year:?+this.$refs.yearPicker.value
    18??????})
    19????}
    20??}
    21};
    22</script>
    23
    

    使用方式:

     1//?WrapperComponent.vue
     2
     3<template>
     4??<div?class="wrapper">
     5????<date-picker?v-model="date"></date-picker>
     6????<p>
     7??????Month:?{{date.month}}
     8??????Year:?{{date.year}}
     9????</p>
    10??</div>
    11</template>
    12
    13<script>
    14import?DatePicker?from?'./DatePicker.vue';
    15
    16export?default?{
    17??components:?{
    18????DatePicker
    19??},
    20
    21??data()?{
    22????return?{
    23??????date:?{
    24????????month:?1,
    25????????year:?2017
    26??????}
    27????}
    28??}
    29})
    30</script>
    

    如上所看到的,它只是接受一個:value屬性并發出一個帶有更新日期的@input事件,一點也不復雜

    高級用法

    通過使用一個或多個計算屬性,我們可以將輸入數據(如字符串)反規范化為輸入元素更容易處理的格式。這通常與更高級的定制組件一起使用,這些組件必須處理各種可能的輸入格式,比如顏色選擇器。

    對于日期選擇器示例,假設日期傳遞的格式是m/yyyy結構的字符串。通過使用計算屬性(在本例中為splitDate),我們可以將輸入字符串拆分為具有monthyear屬性的對象,同時僅對日期選擇器組件進行最少的修改。

     1//?StringyDatePicker.vue
     2<template>
     3??<div?class="date-picker">
     4????Month:?<input?type="number"?ref="monthPicker"?:value="splitDate.month"?@input="updateDate()"/>
     5????Year:?<input?type="number"?ref="yearPicker"?:value="splitDate.year"?@input="updateDate()"/>
     6??</div>
     7</template>
     8
     9<script>
    10export?default?{
    11??props:?['value'],
    12
    13??computed:?{
    14????splitDate()?{
    15??????const?splitValueString?=?this.value.split('/');
    16
    17???????return?{
    18????????month:?splitValueString[0],
    19????????year:?splitValueString[1]
    20??????}
    21????}
    22??},
    23
    24??methods:?{
    25????updateDate()?{
    26??????const?monthValue?=?this.$refs.monthPicker.value;
    27??????const?yearValue?=?this.$refs.yearPicker.value;
    28??????this.$emit('input',?`${monthValue}/${yearValue}`);
    29????}
    30??}
    31};
    32</script>
    33
    

    一旦熟悉了這里介紹的概念,可能會發現自己對任何和每個我們創建的接受用戶輸入的組件都使用了v-model。這是在自己的自定義組件中添加雙向數據綁定支持的一種非常簡單但功能強大的方法。


    作者:Joshua Bemenderfe ?譯者:前端小 ?來源:alligator

    原文:

    https://alligator.io/vuejs/add-v-model-support/
    https://michaelnthiessen.com/hover-in-vue/


    交流

    這些優化技巧可以避免我們在JS中過多的使用IF語句

    適合前端開和UI設計的20多個最佳ICON庫

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

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

    將多個屬性傳遞給&nbsp;Vue&nbsp;組件的幾種方式

    前端小智@大遷世界 CSDN認證博客專家 TypeScript ECMAScript 6 前端框架
    我不是什么大牛,我其實想做的就是一個傳播者。內容可能過于基礎,但對于剛入門的人來說或許是一個窗口,一個解惑之窗。我要先堅持分享20年,大家來一起見證吧。
    ??2020 CSDN 皮膚主題: 猿與汪的秘密 設計師:上身試試 返回首頁
    實付 9.90元
    使用余額支付
    點擊重新獲取
    掃碼支付
    錢包余額 0

    抵扣說明:

    1.余額是錢包充值的虛擬貨幣,按照1:1的比例進行支付金額的抵扣。
    2.余額無法直接購買下載,可以購買VIP、C幣套餐、付費專欄及課程。

    余額充值
    多乐彩