| 提交 | 用户 | 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'; | |
| 55e9d9 | 12 | import { Icon } from '/@/components/Icon'; |
| e9c283 | 13 | import { useDesign } from '/@/hooks/web/useDesign'; |
| 2f6253 | 14 | |
| 55e9d9 | 15 | const props = { |
| V | 16 | /** |
| 17 | * Arrow expand state | |
| 18 | */ | |
| 19 | expand: { type: Boolean }, | |
| 20 | /** | |
| 21 | * Arrow up by default | |
| 22 | */ | |
| 23 | up: { type: Boolean }, | |
| 24 | /** | |
| 25 | * Arrow down by default | |
| 26 | */ | |
| 27 | down: { type: Boolean }, | |
| 28 | /** | |
| 29 | * Cancel padding/margin for inline | |
| 30 | */ | |
| 31 | inset: { type: Boolean }, | |
| 32 | }; | |
| 3b8ca4 | 33 | |
| 2f6253 | 34 | export default defineComponent({ |
| fb0c77 | 35 | name: 'BasicArrow', |
| e5b2cc | 36 | components: { Icon }, |
| 55e9d9 | 37 | props, |
| 2f6253 | 38 | setup(props) { |
| e9c283 | 39 | const { prefixCls } = useDesign('basic-arrow'); |
| V | 40 | |
| 55e9d9 | 41 | // get component class |
| 2f6253 | 42 | const getClass = computed(() => { |
| 55e9d9 | 43 | const { expand, up, down, inset } = props; |
| 73c8e0 | 44 | return [ |
| e9c283 | 45 | prefixCls, |
| 73c8e0 | 46 | { |
| e9c283 | 47 | [`${prefixCls}--active`]: expand, |
| 55e9d9 | 48 | up, |
| 88f4a3 | 49 | inset, |
| 55e9d9 | 50 | down, |
| 73c8e0 | 51 | }, |
| V | 52 | ]; |
| 2f6253 | 53 | }); |
| 陈 | 54 | |
| 55e9d9 | 55 | return { getClass }; |
| 2f6253 | 56 | }, |
| 陈 | 57 | }); |
| 58 | </script> | |
| 59 | <style lang="less" scoped> | |
| e9c283 | 60 | @prefix-cls: ~'@{namespace}-basic-arrow'; |
| V | 61 | |
| 62 | .@{prefix-cls} { | |
| 73c8e0 | 63 | display: inline-block; |
| e2ddf4 | 64 | cursor: pointer; |
| 73c8e0 | 65 | transform: rotate(0deg); |
| 2f6253 | 66 | transition: all 0.3s ease 0.1s; |
| 陈 | 67 | transform-origin: center center; |
| 68 | ||
| e9c283 | 69 | &--active { |
| V | 70 | transform: rotate(90deg); |
| 88f4a3 | 71 | } |
| V | 72 | |
| e9c283 | 73 | &.inset { |
| V | 74 | line-height: 0px; |
| 2f6253 | 75 | } |
| db0628 | 76 | |
| 55e9d9 | 77 | &.up { |
| 73c8e0 | 78 | transform: rotate(-90deg); |
| V | 79 | } |
| 80 | ||
| 55e9d9 | 81 | &.down { |
| 73c8e0 | 82 | transform: rotate(90deg); |
| V | 83 | } |
| 84 | ||
| 55e9d9 | 85 | &.up.@{prefix-cls}--active { |
| 73c8e0 | 86 | transform: rotate(90deg); |
| V | 87 | } |
| 88 | ||
| 55e9d9 | 89 | &.down.@{prefix-cls}--active { |
| 73c8e0 | 90 | transform: rotate(-90deg); |
| db0628 | 91 | } |
| 2f6253 | 92 | } |
| 陈 | 93 | </style> |
