perf: optimize components and add comments

Vben

2021-06-09 55e9d9fc2953643cec95c74b6ed34b0e68641fb6

 src/components/Basic/src/BasicArrow.vue

@@ -4,66 +4,89 @@
-->
<template>
  <span :class="getClass">
    <RightOutlined />
    <Icon icon="ion:chevron-forward" :style="$attrs.iconStyle" />
  </span>
</template>
<script lang="ts">
  import { defineComponent, computed } from 'vue';
  import { RightOutlined } from '@ant-design/icons-vue';
  import { propTypes } from '/@/utils/propTypes';
  import { Icon } from '/@/components/Icon';
  import { useDesign } from '/@/hooks/web/useDesign';

  const props = {
    /**
     * Arrow expand state
     */
    expand: { type: Boolean },
    /**
     * Arrow up by default
     */
    up: { type: Boolean },
    /**
     * Arrow down by default
     */
    down: { type: Boolean },
    /**
     * Cancel padding/margin for inline
     */
    inset: { type: Boolean },
  };

  export default defineComponent({
    name: 'BasicArrow',
    components: { RightOutlined },
    props: {
      // Expand contract, expand by default
      expand: propTypes.bool,
      top: propTypes.bool,
      bottom: propTypes.bool,
    },
    components: { Icon },
    props,
    setup(props) {
      const { prefixCls } = useDesign('basic-arrow');

      // get component class
      const getClass = computed(() => {
        const { expand, top, bottom } = props;
        const { expand, up, down, inset } = props;
        return [
          'base-arrow',
          prefixCls,
          {
            'base-arrow__active': expand,
            top,
            bottom,
            [`${prefixCls}--active`]: expand,
            up,
            inset,
            down,
          },
        ];
      });

      return {
        getClass,
      };
      return { getClass };
    },
  });
</script>
<style lang="less" scoped>
  .base-arrow {
  @prefix-cls: ~'@{namespace}-basic-arrow';

  .@{prefix-cls} {
    display: inline-block;
    cursor: pointer;
    transform: rotate(0deg);
    transition: all 0.3s ease 0.1s;
    transform-origin: center center;

    &__active {
    &--active {
      transform: rotate(90deg);
    }

    &.top {
    &.inset {
      line-height: 0px;
    }

    &.up {
      transform: rotate(-90deg);
    }

    &.bottom {
    &.down {
      transform: rotate(90deg);
    }

    &.top.base-arrow__active {
    &.up.@{prefix-cls}--active {
      transform: rotate(90deg);
    }

    &.bottom.base-arrow__active {
    &.down.@{prefix-cls}--active {
      transform: rotate(-90deg);
    }
  }