| 提交 | 用户 | age | ||
| 46e087 | 1 | <!-- |
| V | 2 | * @Author: Vben |
| 3 | * @Description: Arrow component with animation | |
| 4 | --> | |
| 2f6253 | 5 | <template> |
| 陈 | 6 | <span :class="getClass"> |
| 3b8ca4 | 7 | <Icon icon="ion:chevron-forward" :style="$attrs.iconStyle" /> |
| 2f6253 | 8 | </span> |
| 陈 | 9 | </template> |
| 10 | <script lang="ts"> | |
| 11 | import { defineComponent, computed } from 'vue'; | |
| 236575 | 12 | |
| e9c283 | 13 | import { useDesign } from '/@/hooks/web/useDesign'; |
| 2f6253 | 14 | |
| 236575 | 15 | import { propTypes } from '/@/utils/propTypes'; |
| V | 16 | |
| 3b8ca4 | 17 | import { Icon } from '/@/components/Icon'; |
| V | 18 | |
| 2f6253 | 19 | export default defineComponent({ |
| fb0c77 | 20 | name: 'BasicArrow', |
| e5b2cc | 21 | components: { Icon }, |
| 2f6253 | 22 | props: { |
| 73c8e0 | 23 | expand: propTypes.bool, |
| V | 24 | top: propTypes.bool, |
| 25 | bottom: propTypes.bool, | |
| 88f4a3 | 26 | inset: propTypes.bool, |
| 2f6253 | 27 | }, |
| 陈 | 28 | setup(props) { |
| e9c283 | 29 | const { prefixCls } = useDesign('basic-arrow'); |
| V | 30 | |
| 2f6253 | 31 | const getClass = computed(() => { |
| 88f4a3 | 32 | const { expand, top, bottom, inset } = props; |
| 73c8e0 | 33 | return [ |
| e9c283 | 34 | prefixCls, |
| 73c8e0 | 35 | { |
| e9c283 | 36 | [`${prefixCls}--active`]: expand, |
| 73c8e0 | 37 | top, |
| 88f4a3 | 38 | inset, |
| 73c8e0 | 39 | bottom, |
| V | 40 | }, |
| 41 | ]; | |
| 2f6253 | 42 | }); |
| 陈 | 43 | |
| 44 | return { | |
| 45 | getClass, | |
| 46 | }; | |
| 47 | }, | |
| 48 | }); | |
| 49 | </script> | |
| 50 | <style lang="less" scoped> | |
| e9c283 | 51 | @prefix-cls: ~'@{namespace}-basic-arrow'; |
| V | 52 | |
| 53 | .@{prefix-cls} { | |
| 73c8e0 | 54 | display: inline-block; |
| V | 55 | transform: rotate(0deg); |
| 2f6253 | 56 | transition: all 0.3s ease 0.1s; |
| 陈 | 57 | transform-origin: center center; |
| 58 | ||
| e9c283 | 59 | &--active { |
| V | 60 | transform: rotate(90deg); |
| 88f4a3 | 61 | } |
| V | 62 | |
| e9c283 | 63 | &.inset { |
| V | 64 | line-height: 0px; |
| 2f6253 | 65 | } |
| db0628 | 66 | |
| 73c8e0 | 67 | &.top { |
| V | 68 | transform: rotate(-90deg); |
| 69 | } | |
| 70 | ||
| 71 | &.bottom { | |
| 72 | transform: rotate(90deg); | |
| 73 | } | |
| 74 | ||
| e9c283 | 75 | &.top.@{prefix-cls}--active { |
| 73c8e0 | 76 | transform: rotate(90deg); |
| V | 77 | } |
| 78 | ||
| e9c283 | 79 | &.bottom.@{prefix-cls}--active { |
| 73c8e0 | 80 | transform: rotate(-90deg); |
| db0628 | 81 | } |
| 2f6253 | 82 | } |
| 陈 | 83 | </style> |
