From 7981f6ca0d0af76c9e2c73167999d3d67994727d Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Sat, 10 Jul 2021 01:34:33 +0800 Subject: [PATCH] refactor(carousel): clean code --- CHANGELOG.en-US.md | 2 +- CHANGELOG.zh-CN.md | 2 +- src/carousel/demos/enUS/index.demo-entry.md | 2 +- src/carousel/demos/zhCN/index.demo-entry.md | 2 +- src/carousel/src/Carousel.tsx | 7 ++++--- src/carousel/src/styles/index.cssr.ts | 12 ++++++++---- src/carousel/styles/light.ts | 3 ++- 7 files changed, 18 insertions(+), 12 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 97b1273d4..57cded05c 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -5,6 +5,7 @@ ### Feats - `n-rate` add `allow-half` prop. +- `n-carousel` add `show-arrow` prop. ### Fixes @@ -19,7 +20,6 @@ - `n-tree` exports `TreeDragInfo` & `TreeDropInfo` type. - `n-empty` export `icon` slot. - `useDialog` option add `maskClosable` prop, closes [#420](https://github.com/TuSimple/naive-ui/issues/420). -- `n-carousel` add `show-arrow` prop. ### Fixes diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 7f60e85e5..92dfe04cc 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -5,6 +5,7 @@ ### Feats - `n-rate` 新增 `allow-half` 属性 +- `n-carousel` 新增 `show-arrow` 属性 ### Fixes @@ -19,7 +20,6 @@ - `n-tree` 导出 `TreeDragInfo` & `TreeDropInfo` 类型 - `n-empty` 导出 `icon` slot - `useDialog` 选项增加 `maskClosable` 属性，关闭 [#420](https://github.com/TuSimple/naive-ui/issues/420) -- `n-carousel` 新增 `show-arrow` 属性 ### Fixes diff --git a/src/carousel/demos/enUS/index.demo-entry.md b/src/carousel/demos/enUS/index.demo-entry.md index 007dfa288..82ab09b64 100644 --- a/src/carousel/demos/enUS/index.demo-entry.md +++ b/src/carousel/demos/enUS/index.demo-entry.md @@ -18,10 +18,10 @@ show-arrow | Name | Type | Default | Description | | --- | --- | --- | --- | -| show-arrow | `boolean` | `false` | Whether to show arrow button. | | autoplay | `boolean` | `false` | Whether to scroll automatically. | | interval | `number` | `5000` | Auto play interval. | | dot-placement | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` | Dot placement in the panel. | +| show-arrow | `boolean` | `false` | Whether to show arrow button. | | trigger | `'click' \| 'hover'` | `'click'` | The way to trigger the switch. | ### Carousel Slots diff --git a/src/carousel/demos/zhCN/index.demo-entry.md b/src/carousel/demos/zhCN/index.demo-entry.md index 2e8e3d943..9a9811cc7 100644 --- a/src/carousel/demos/zhCN/index.demo-entry.md +++ b/src/carousel/demos/zhCN/index.demo-entry.md @@ -18,10 +18,10 @@ show-arrow | 名称 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | -| show-arrow | `boolean` | `false` | 是否显示箭头按钮 | | autoplay | `boolean` | `false` | 是否自动播放 | | dot-placement | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` | 轮播指示点位置 | | interval | `number` | `5000` | 自动播放的间隔 | +| show-arrow | `boolean` | `false` | 是否显示箭头按钮 | | trigger | `'click' \| 'hover'` | `'click'` | 触发切换的方式 | ### Carousel Slots diff --git a/src/carousel/src/Carousel.tsx b/src/carousel/src/Carousel.tsx index f78e4562c..5bd6b26b2 100644 --- a/src/carousel/src/Carousel.tsx +++ b/src/carousel/src/Carousel.tsx @@ -14,11 +14,11 @@ import { } from 'vue' import { indexMap } from 'seemly' import { on, off } from 'evtd' +import { BackwardIcon, ForwardIcon } from '../../_internal/icons' import { useConfig, useTheme } from '../../_mixins' import type { ThemeProps } from '../../_mixins' import { flatten } from '../../_utils' import type { ExtractPublicPropTypes } from '../../_utils' -import { BackwardIcon, ForwardIcon } from '../../_internal/icons' import { carouselLight } from '../styles' import type { CarouselTheme } from '../styles' import style from './styles/index.cssr' @@ -260,13 +260,14 @@ export default defineComponent({ cssVars: computed(() => { const { common: { cubicBezierEaseInOut }, - self: { dotColor, dotColorActive, dotSize } + self: { dotColor, dotColorActive, dotSize, arrowColor } } = themeRef.value return { '--bezier': cubicBezierEaseInOut, '--dot-color': dotColor, '--dot-color-active': dotColorActive, - '--dot-size': dotSize + '--dot-size': dotSize, + '--arrow-color': arrowColor } }) } diff --git a/src/carousel/src/styles/index.cssr.ts b/src/carousel/src/styles/index.cssr.ts index 731a854e4..d003961cf 100644 --- a/src/carousel/src/styles/index.cssr.ts +++ b/src/carousel/src/styles/index.cssr.ts @@ -5,6 +5,7 @@ import { c, cB, cE, cM } from '../../../_utils/cssr' // --dot-color // --dot-color-active // --dot-size +// --arrow-color export default cB('carousel', ` overflow: hidden; position: relative; @@ -49,15 +50,15 @@ export default cB('carousel', ` ]), cE('arrow', ` position: absolute; - transition: transform .1s var(--bezier); + transition: transform .3s var(--bezier); transform: scale(1); cursor: pointer; - height: 50px; - width: 50px; + height: 48px; + width: 48px; display: flex; align-items: center; justify-content: center; - color: var(--dot-color-active); + color: var(--arrow-color); `, [ cM('right', ` transform: translateY(-50%); @@ -66,6 +67,9 @@ export default cB('carousel', ` `, [ c('&:hover', { transform: 'translateY(-50%) scale(1.1)' + }), + c('&:active', { + transform: 'translateY(-50%) scale(1)' }) ]), cM('left', ` diff --git a/src/carousel/styles/light.ts b/src/carousel/styles/light.ts index ca8895373..a2ee0a22b 100644 --- a/src/carousel/styles/light.ts +++ b/src/carousel/styles/light.ts @@ -6,7 +6,8 @@ export const self = (vars: ThemeCommonVars) => { return { dotSize: '8px', dotColor: 'rgba(255, 255, 255, .3)', - dotColorActive: 'rgba(255, 255, 255, 1)' + dotColorActive: 'rgba(255, 255, 255, 1)', + arrowColor: 'rgba(255, 255, 255, .6)' } }