[improvement]: 使用 hover-class 定义点击态样式

packages/action-sheet/index.less

@@ -4,6 +4,17 @@
   max-height: 90% !important;
   color: @text-color;
 
+  &__cancel {
+    height: 60px;
+
+    &::before {
+      display: block;
+      height: 10px;
+      background-color: @background-color;
+      content: ' ';
+    }
+  }
+
   &__item,
   &__cancel {
     height: 50px;
@@ -12,28 +23,17 @@
     text-align: center;
     background-color: @white;
 
-    &:active {
+    &--hover {
       background-color: @active-color;
     }
   }
 
-  &__cancel {
-    height: 60px;
-
-    &::before {
-      display: block;
-      content: ' ';
-      height: 10px;
-      background-color: @background-color;
-    }
-  }
-
   &__item--disabled {
     color: @gray;
+  }
 
-    &:active {
-      background-color: @white;
-    }
+  &__item--disabled&__item--hover {
+    background-color: @white;
   }
 
   &__subname {

packages/action-sheet/index.wxml

@@ -1,3 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <van-popup
   show="{{ show }}"
   position="bottom"
@@ -22,7 +24,8 @@
       wx:for="{{ actions }}"
       wx:key="index"
       open-type="{{ item.openType }}"
-      class="van-action-sheet__item van-hairline--top {{ item.disabled || item.loading ? 'van-action-sheet__item--disabled' : '' }} {{ item.className || '' }}"
+      class="{{ utils.bem('action-sheet__item', { disabled: item.disabled || item.loading }) }} van-hairline--top {{ item.className || '' }}"
+      hover-class="van-action-sheet__item--hover"
       data-index="{{ index }}"
       bind:tap="onSelect"
     >
@@ -36,6 +39,8 @@
   <view
     wx:if="{{ cancelText }}"
     class="van-action-sheet__cancel"
+    hover-class="van-action-sheet__cancel--hover"
+    hover-stay-time="70"
     bind:tap="onCancel"
   >
     {{ cancelText }}

packages/badge/README.md

@@ -16,7 +16,7 @@
 通过在`van-badge-group`上设置`active`属性来控制选中的`badge`
 
 ```html
-<van-badge-group :active="active" bind:change="onChange">
+<van-badge-group active="{{ active }}" bind:change="onChange">
   <van-badge title="标签名称" />
   <van-badge title="标签名称" info="8" />
   <van-badge title="标签名称" info="99" />

packages/badge/index.less

@@ -2,18 +2,18 @@
 
 .van-badge {
   display: block;
+  padding: 20px 12px 20px 9px;
   overflow: hidden;
   font-size: 14px;
   line-height: 1.4;
-  user-select: none;
   color: @gray-darker;
   word-break: break-all;
-  box-sizing: border-box;
-  padding: 20px 12px 20px 9px;
   background-color: @background-color;
   border-left: 3px solid transparent;
+  box-sizing: border-box;
+  user-select: none;
 
-  &:active {
+  &--hover {
     background-color: @active-color;
   }
 
@@ -29,11 +29,11 @@
     &::after {
       border-right-width: 1px;
     }
+  }
 
-    &,
-    &:active {
-      background-color: @white;
-    }
+  &--active,
+  &--active&--hover {
+    background-color: @white;
   }
 
   &__text {

packages/badge/index.wxml

@@ -1,4 +1,11 @@
-<view class="van-badge van-hairline custom-class {{ active ? 'van-badge--active' : '' }}" bind:tap="onClick">
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view
+  class="{{ utils.bem('badge', { active }) }} van-hairline custom-class"
+  hover-class="van-badge--hover"
+  hover-stay-time="70"
+  bind:tap="onClick"
+>
   <view class="van-badge__text">
     <van-info
       wx:if="{{ info !== null }}"

packages/cell/index.less

@@ -1,16 +1,16 @@
 @import '../common/style/var.less';
-@import "../common/style/mixins/hairline.less";
+@import '../common/style/mixins/hairline.less';
 
 .van-cell {
-  width: 100%;
-  display: flex;
-  padding: 10px 15px;
-  box-sizing: border-box;
-  line-height: 24px;
   position: relative;
-  background-color: @white;
-  color: @text-color;
+  display: flex;
+  width: 100%;
+  padding: 10px 15px;
   font-size: 14px;
+  line-height: 24px;
+  color: @text-color;
+  background-color: @white;
+  box-sizing: border-box;
 
   &::after {
     .hairline-bottom(@border-color, 15px);
@@ -25,10 +25,17 @@
   }
 
   &__label {
-    color: @gray-dark;
-    font-size: 12px;
     margin-top: 3px;
+    font-size: 12px;
     line-height: 18px;
+    color: @gray-dark;
+  }
+
+  &__value {
+    overflow: hidden;
+    color: @gray-dark;
+    text-align: right;
+    vertical-align: middle;
   }
 
   &__title,
@@ -40,19 +47,12 @@
     }
   }
 
-  &__value {
-    color: @gray-dark;
-    overflow: hidden;
-    text-align: right;
-    vertical-align: middle;
-  }
-
   &__left-icon-wrap,
   &__right-icon-wrap {
     display: flex;
-    align-items: center;
     height: 24px;
     font-size: 16px;
+    align-items: center;
   }
 
   &__left-icon-wrap {
@@ -73,21 +73,19 @@
     line-height: 24px;
   }
 
-  &--clickable {
-    &:active {
-      background-color: @active-color;
-    }
+  &--clickable&--hover {
+    background-color: @active-color;
   }
 
   &--required {
     overflow: visible;
 
     &::before {
-      content: '*';
       position: absolute;
       left: 7px;
       font-size: 14px;
       color: @red;
+      content: '*';
     }
   }
 

packages/cell/index.ts

@@ -6,7 +6,8 @@ VantComponent({
     'title-class',
     'label-class',
     'value-class',
-    'right-icon-class'
+    'right-icon-class',
+    'hover-class'
   ],
 
   mixins: [link],

packages/cell/index.wxml

@@ -2,6 +2,8 @@
 
 <view
   class="custom-class {{ utils.bem('cell', [size, { center, required, borderless: !border, clickable: isLink || clickable }]) }}"
+  hover-class="van-cell--hover hover-class"
+  hover-stay-time="70"
   style="{{ customStyle }}"
   bind:tap="onClick"
 >

packages/collapse-item/index.less

@@ -19,7 +19,7 @@
         color: @collapse-item-title-disabled-color !important;
       }
 
-      .van-cell:active {
+      .van-cell--hover {
         background-color: @white !important;
       }
     }
@@ -30,10 +30,10 @@
   }
 
   &__content {
-    color: @collapse-item-content-text-color;
     padding: @collapse-item-content-padding;
     font-size: @collapse-item-content-font-size;
     line-height: @collapse-item-content-line-height;
+    color: @collapse-item-content-text-color;
     background-color: @collapse-item-content-background-color;
   }
 }

packages/collapse-item/index.wxml

@@ -12,6 +12,7 @@
     class="{{ utils.bem('collapse-item__title', { disabled, expanded }) }}"
     right-icon-class="van-cell__right-icon"
     custom-class="van-cell"
+    hover-class="van-cell--hover"
     bind:click="onClick"
   >
     <slot

packages/datetime-picker/index.less

@@ -1,72 +0,0 @@
-@import '../common/style/var.less';
-
-.van-picker {
-  -webkit-text-size-adjust: 100%; /* avoid iOS text size adjust */
-  position: relative;
-  overflow: hidden;
-  background-color: @white;
-  user-select: none;
-
-  &__toolbar {
-    display: flex;
-    justify-content: space-between;
-    height: 44px;
-    line-height: 44px;
-  }
-
-  &__cancel,
-  &__confirm {
-    color: @blue;
-    padding: 0 15px;
-    font-size: 14px;
-
-    &:active {
-      background-color: @active-color;
-    }
-  }
-
-  &__title {
-    max-width: 50%;
-    font-size: 16px;
-    font-weight: 500;
-    text-align: center;
-  }
-
-  &__columns {
-    position: relative;
-  }
-
-  &__loading {
-    display: flex;
-    z-index: 4;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    align-items: center;
-    justify-content: center;
-    background-color: rgba(255, 255, 255, .9);
-  }
-
-  &-column {
-    flex: 1;
-    overflow: hidden;
-    font-size: 16px;
-    text-align: center;
-
-    &__item {
-      padding: 0 5px;
-      color: @gray-dark;
-
-      &--selected {
-        font-weight: 500;
-        color: @text-color;
-      }
-
-      &--disabled {
-        opacity: .3;
-      }
-    }
-  }
-}

packages/dialog/index.less

@@ -2,14 +2,14 @@
 
 .van-dialog {
   width: 85%;
-  font-size: 16px;
   overflow: hidden;
-  border-radius: 4px;
+  font-size: 16px;
   background-color: @white;
+  border-radius: 4px;
 
   &__header {
-    font-weight: 500;
     padding-top: 25px;
+    font-weight: 500;
     text-align: center;
 
     &--isolated {
@@ -18,11 +18,11 @@
   }
 
   &__message {
+    max-height: 60vh;
     padding: 25px;
+    overflow-y: auto;
     font-size: 14px;
     line-height: 1.5;
-    max-height: 60vh;
-    overflow-y: auto;
     text-align: center;
     -webkit-overflow-scrolling: touch;
 
@@ -54,10 +54,7 @@
   }
 
   &__confirm {
-    &,
-    &:active {
-      color: @blue !important;
-    }
+    color: @blue !important;
   }
 
   &-bounce-enter {

packages/nav-bar/index.less

@@ -1,42 +1,54 @@
 @import '../common/style/var.less';
 
 .van-nav-bar {
-  height: 46px;
   position: relative;
-  user-select: none;
-  text-align: center;
+  height: 46px;
   line-height: 46px;
+  text-align: center;
   background-color: @white;
+  user-select: none;
+
+  &__text {
+    display: inline-block;
+    padding: 0 15px;
+    margin: 0 -15px;
+    color: @blue;
+    vertical-align: middle;
+
+    &--hover {
+      background-color: @active-color;
+    }
+  }
 
   &__arrow {
     color: @blue;
     vertical-align: middle;
 
     + .van-nav-bar__text {
-      margin-left: -20px;
       padding-left: 25px;
+      margin-left: -20px;
     }
   }
 
   &--fixed {
+    position: fixed;
     top: 0;
     left: 0;
     width: 100%;
-    position: fixed;
   }
 
   &__title {
-    margin: 0 auto;
     max-width: 60%;
+    margin: 0 auto;
     font-size: 16px;
     font-weight: 500;
   }
 
   &__left,
   &__right {
+    position: absolute;
     bottom: 0;
     font-size: 14px;
-    position: absolute;
   }
 
   &__left {
@@ -46,16 +58,4 @@
   &__right {
     right: 15px;
   }
-
-  &__text {
-    color: @blue;
-    margin: 0 -15px;
-    padding: 0 15px;
-    display: inline-block;
-    vertical-align: middle;
-
-    &:active {
-      background-color: @active-color;
-    }
-  }
 }

packages/nav-bar/index.wxml

@@ -10,7 +10,12 @@
         name="arrow-left"
         custom-class="van-nav-bar__arrow"
       />
-      <view wx:if="{{ leftText }}" class="van-nav-bar__text">{{ leftText }}</view>
+      <view
+        wx:if="{{ leftText }}"
+        class="van-nav-bar__text"
+        hover-class="van-nav-bar__text--hover"
+        hover-stay-time="70"
+      >{{ leftText }}</view>
     </block>
     <slot wx:else name="left" />
   </view>
@@ -19,7 +24,12 @@
     <slot wx:else name="title" />
   </view>
   <view class="van-nav-bar__right" bind:tap="onClickRight">
-    <view wx:if="{{ rightText }}" class="van-nav-bar__text">{{ rightText }}</view>
+    <view
+      wx:if="{{ rightText }}"
+      class="van-nav-bar__text"
+      hover-class="van-nav-bar__text--hover"
+      hover-stay-time="70"
+    >{{ rightText }}</view>
     <slot wx:else name="right" />
   </view>
 </view>

packages/picker/index.less

@@ -20,7 +20,7 @@
     font-size: 14px;
     color: @blue;
 
-    &:active {
+    &--hover {
       background-color: @active-color;
     }
   }

packages/picker/index.wxml

@@ -3,11 +3,23 @@
     wx:if="{{ showToolbar }}"
     class="van-picker__toolbar van-hairline--top-bottom toolbar-class"
   >
-    <view class="van-picker__cancel" data-type="cancel" bindtap="emit">
+    <view
+      class="van-picker__cancel"
+      hover-class="van-picker__cancel--hover"
+      hover-stay-time="70"
+      data-type="cancel"
+      bindtap="emit"
+    >
       {{ cancelButtonText || '取消' }}
     </view>
     <view wx:if="{{ title }}" class="van-picker__title van-ellipsis">{{ title }}</view>
-    <view class="van-picker__confirm" data-type="confirm" bindtap="emit">
+    <view
+      class="van-picker__confirm"
+      hover-class="van-picker__confirm--hover"
+      hover-stay-time="70"
+      data-type="confirm"
+      bindtap="emit"
+    >
       {{ confirmButtonText || '确认' }}
     </view>
   </view>

packages/search/index.less

@@ -35,7 +35,7 @@
     line-height: 30px;
     color: @gray-darker;
 
-    &:active {
+    &--hover {
       background-color: @active-color;
     }
   }

packages/search/index.wxml

@@ -26,7 +26,12 @@
     bind:confirm="onSearch"
     bind:clear="onClear"
   />
-  <view wx:if="{{ showAction || useActionSlot }}" class="van-search__action">
+  <view
+    wx:if="{{ showAction || useActionSlot }}"
+    class="van-search__action"
+    hover-class="van-search__action--hover"
+    hover-stay-time="70"
+  >
     <slot wx:if="{{ useActionSlot }}" name="action" />
     <view wx:else bind:tap="onCancel" class="cancel-class">取消</view>
   </view>

packages/stepper/index.less

@@ -11,6 +11,18 @@
     background-color: @white;
   }
 
+  &__minus {
+    border-radius: 2px 0 0 2px;
+
+    &::after {
+      display: none;
+    }
+  }
+
+  &__plus {
+    border-radius: 0 2px 2px 0;
+  }
+
   &__minus,
   &__plus {
     position: relative;
@@ -42,7 +54,7 @@
       content: '';
     }
 
-    &:active {
+    &--hover {
       background-color: @active-color;
     }
 
@@ -55,23 +67,11 @@
       }
     }
 
-    &--disabled:active {
+    &--disabled&--hover {
       background-color: @background-color;
     }
   }
 
-  &__minus {
-    border-radius: 2px 0 0 2px;
-
-    &::after {
-      display: none;
-    }
-  }
-
-  &__plus {
-    border-radius: 0 2px 2px 0;
-  }
-
   &__input-wrapper {
     position: relative;
     width: 35px;

packages/stepper/index.wxml

@@ -1,6 +1,8 @@
 <view class="van-stepper custom-class">
   <view
     class="minus-class van-stepper__minus {{ minusDisabled ? 'van-stepper__minus--disabled' : '' }}"
+    hover-class="van-stepper__minus--hover"
+    hover-stay-time="70"
     bind:tap="onMinus"
   />
   <view class="input-class van-stepper__input-wrapper {{ disabled || disableInput ? 'van-stepper__input-wrapper--disabled' : '' }}" bindtap="onFocus">
@@ -16,6 +18,8 @@
   </view>
   <view
     class="plus-class van-stepper__plus {{ plusDisabled ? 'van-stepper__plus--disabled' : '' }}"
+    hover-class="van-stepper__plus--hover"
+    hover-stay-time="70"
     bind:tap="onPlus"
   />
 </view>

packages/tree-select/index.less

@@ -38,10 +38,6 @@
     &--disabled {
       color: @gray-dark;
     }
-
-    &--disabled:active::after {
-      display: none;
-    }
   }
 
   &__content {
@@ -61,8 +57,7 @@
       color: @red;
     }
 
-    &--disabled,
-    &--disabled:active {
+    &--disabled {
       color: @gray-dark;
     }
   }