From 2eb680723d01ee4a4e675be6d708a1dff575d504 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Sat, 11 Jan 2020 15:46:47 +0800 Subject: [PATCH] feat: improve cursor --- src/action-sheet/index.less | 10 ++++++++++ src/action-sheet/index.tsx | 12 ++++++------ .../test/__snapshots__/index.spec.js.snap | 2 +- src/collapse-item/index.less | 2 ++ src/dropdown-menu/index.less | 1 + src/field/index.less | 1 + src/goods-action-icon/index.less | 1 + src/grid-item/index.less | 8 ++++++-- src/index-bar/index.less | 1 + src/nav-bar/index.less | 1 + src/notice-bar/index.less | 1 + src/number-keyboard/index.less | 2 ++ src/pagination/demo/index.vue | 2 +- src/pagination/index.less | 19 ++++++++++++------- src/password-input/index.less | 1 + src/picker/index.less | 2 +- src/rate/index.js | 9 ++++++++- src/rate/index.less | 9 +++++++++ src/rate/test/__snapshots__/demo.spec.js.snap | 4 ++-- src/search/index.less | 2 ++ src/sidebar-item/index.less | 2 ++ src/sku/index.less | 2 ++ src/slider/index.less | 7 +++++++ src/stepper/index.less | 2 ++ src/swipe-cell/index.less | 1 + src/swipe/index.less | 2 +- .../test/__snapshots__/demo.spec.js.snap | 2 +- src/switch/index.less | 6 ++++++ src/switch/index.tsx | 1 + .../test/__snapshots__/demo.spec.js.snap | 2 +- src/tabs/index.less | 1 + src/tree-select/index.less | 2 ++ src/uploader/index.less | 1 + 33 files changed, 97 insertions(+), 24 deletions(-) diff --git a/src/action-sheet/index.less b/src/action-sheet/index.less index 6e54ae3aa..9d3c0ef63 100644 --- a/src/action-sheet/index.less +++ b/src/action-sheet/index.less @@ -14,6 +14,7 @@ text-align: center; background-color: @action-sheet-item-background; border: none; + cursor: pointer; &:active { background-color: @active-color; @@ -23,6 +24,7 @@ &__item { height: @action-sheet-item-height; + &--loading, &--disabled { color: @action-sheet-item-disabled-text-color; @@ -30,6 +32,14 @@ background-color: @action-sheet-item-background; } } + + &--disabled { + cursor: not-allowed; + } + + &--loading { + cursor: default; + } } &__subname { diff --git a/src/action-sheet/index.tsx b/src/action-sheet/index.tsx index 3ff354544..6680092ad 100644 --- a/src/action-sheet/index.tsx +++ b/src/action-sheet/index.tsx @@ -70,17 +70,17 @@ function ActionSheet( } function Option(item: ActionSheetItem, index: number) { - const disabled = item.disabled || item.loading; + const { disabled, loading, callback } = item; function onClickOption(event: MouseEvent) { event.stopPropagation(); - if (item.disabled || item.loading) { + if (disabled || loading) { return; } - if (item.callback) { - item.callback(item); + if (callback) { + callback(item); } emit(ctx, 'select', item, index); @@ -91,7 +91,7 @@ function ActionSheet( } function OptionContent() { - if (item.loading) { + if (loading) { return ; } @@ -104,7 +104,7 @@ function ActionSheet( return ( `; diff --git a/src/collapse-item/index.less b/src/collapse-item/index.less index 0b860ce4f..cb929a5eb 100644 --- a/src/collapse-item/index.less +++ b/src/collapse-item/index.less @@ -22,6 +22,8 @@ } &--disabled { + cursor: not-allowed; + &, & .van-cell__right-icon { color: @collapse-item-title-disabled-color; diff --git a/src/dropdown-menu/index.less b/src/dropdown-menu/index.less index 19353d66e..70cdd97cf 100644 --- a/src/dropdown-menu/index.less +++ b/src/dropdown-menu/index.less @@ -12,6 +12,7 @@ align-items: center; justify-content: center; min-width: 0; // hack for flex ellipsis + cursor: pointer; &:active { opacity: @active-opacity; diff --git a/src/field/index.less b/src/field/index.less index 2ee283186..d41ec4c95 100644 --- a/src/field/index.less +++ b/src/field/index.less @@ -81,6 +81,7 @@ &__clear { color: @field-clear-icon-color; font-size: @field-clear-icon-size; + cursor: pointer; } &__left-icon .van-icon, diff --git a/src/goods-action-icon/index.less b/src/goods-action-icon/index.less index 9ef7a1b82..1b4f32ad2 100644 --- a/src/goods-action-icon/index.less +++ b/src/goods-action-icon/index.less @@ -11,6 +11,7 @@ line-height: 1; text-align: center; background-color: @white; + cursor: pointer; &:active { background-color: @goods-action-icon-active-color; diff --git a/src/grid-item/index.less b/src/grid-item/index.less index 7cea0b221..c8072cb6d 100644 --- a/src/grid-item/index.less +++ b/src/grid-item/index.less @@ -39,8 +39,12 @@ } } - &--clickable:active { - background-color: @grid-item-content-active-color; + &--clickable { + cursor: pointer; + + &:active { + background-color: @grid-item-content-active-color; + } } } diff --git a/src/index-bar/index.less b/src/index-bar/index.less index be711d7b0..ad5c62543 100644 --- a/src/index-bar/index.less +++ b/src/index-bar/index.less @@ -9,6 +9,7 @@ flex-direction: column; text-align: center; transform: translateY(-50%); + cursor: pointer; user-select: none; } diff --git a/src/nav-bar/index.less b/src/nav-bar/index.less index f105af04b..6b2280794 100644 --- a/src/nav-bar/index.less +++ b/src/nav-bar/index.less @@ -43,6 +43,7 @@ position: absolute; bottom: 0; font-size: @font-size-md; + cursor: pointer; } &__left { diff --git a/src/notice-bar/index.less b/src/notice-bar/index.less index 897bfc073..9d00acd63 100644 --- a/src/notice-bar/index.less +++ b/src/notice-bar/index.less @@ -19,6 +19,7 @@ &__right-icon { text-align: right; + cursor: pointer; } &__wrap { diff --git a/src/number-keyboard/index.less b/src/number-keyboard/index.less index 09a822c51..c1b1081ae 100644 --- a/src/number-keyboard/index.less +++ b/src/number-keyboard/index.less @@ -34,6 +34,7 @@ padding: @number-keyboard-close-padding; color: @number-keyboard-close-color; font-size: @number-keyboard-close-font-size; + cursor: pointer; &:active { background-color: @number-keyboard-key-active-color; @@ -69,6 +70,7 @@ line-height: @number-keyboard-key-height; text-align: center; vertical-align: middle; + cursor: pointer; &::after { border-width: @border-width-base @border-width-base 0 0; diff --git a/src/pagination/demo/index.vue b/src/pagination/demo/index.vue index 7ff5959dc..3778e7bac 100644 --- a/src/pagination/demo/index.vue +++ b/src/pagination/demo/index.vue @@ -39,7 +39,7 @@ export default { i18n: { 'zh-CN': { title2: '简单模式', - title3: '', + title3: '显示省略号', prevText: '上一页', nextText: '下一页' }, diff --git a/src/pagination/index.less b/src/pagination/index.less index 1b17fbf4b..75a1a5e82 100644 --- a/src/pagination/index.less +++ b/src/pagination/index.less @@ -13,6 +13,7 @@ height: @pagination-height; color: @pagination-item-default-color; background-color: @pagination-background-color; + cursor: pointer; user-select: none; &:active { @@ -28,13 +29,6 @@ border-right-width: @border-width-base; } - &--disabled, - &--disabled:active { - color: @pagination-item-disabled-color; - background-color: @pagination-item-disabled-background-color; - opacity: @pagination-disabled-opacity; - } - &--active { color: @white; background-color: @pagination-item-default-color; @@ -44,6 +38,17 @@ &__prev, &__next { padding: 0 @padding-base; + cursor: pointer; + } + + &__item--disabled { + &, + &:active { + color: @pagination-item-disabled-color; + background-color: @pagination-item-disabled-background-color; + cursor: not-allowed; + opacity: @pagination-disabled-opacity; + } } &__page { diff --git a/src/password-input/index.less b/src/password-input/index.less index 0de8ff301..98b8b189b 100644 --- a/src/password-input/index.less +++ b/src/password-input/index.less @@ -24,6 +24,7 @@ display: flex; width: 100%; height: @password-input-height; + cursor: pointer; &::after { border-radius: @password-input-border-radius; diff --git a/src/picker/index.less b/src/picker/index.less index 7f7607cf5..b5d115438 100644 --- a/src/picker/index.less +++ b/src/picker/index.less @@ -37,7 +37,7 @@ &__columns { position: relative; display: flex; - cursor: pointer; + cursor: grab; } &__loading { diff --git a/src/rate/index.js b/src/rate/index.js index 980db4c3c..8a657c407 100644 --- a/src/rate/index.js +++ b/src/rate/index.js @@ -201,7 +201,14 @@ export default createComponent({ render() { return ( -
+
{this.list.map((status, index) => this.genStar(status, index))}
); diff --git a/src/rate/index.less b/src/rate/index.less index 53dacd472..ff5259a6b 100644 --- a/src/rate/index.less +++ b/src/rate/index.less @@ -2,6 +2,7 @@ .van-rate { display: inline-flex; + cursor: pointer; user-select: none; &__item { @@ -25,4 +26,12 @@ overflow: hidden; } } + + &--disabled { + cursor: not-allowed; + } + + &--readonly { + cursor: default; + } } diff --git a/src/rate/test/__snapshots__/demo.spec.js.snap b/src/rate/test/__snapshots__/demo.spec.js.snap index c3d421f47..3a709cb5f 100644 --- a/src/rate/test/__snapshots__/demo.spec.js.snap +++ b/src/rate/test/__snapshots__/demo.spec.js.snap @@ -80,7 +80,7 @@ exports[`renders demo correctly 1`] = `
-
+
-
+