perf: optimize components and add comments

Vben

2021-06-09 55e9d9fc2953643cec95c74b6ed34b0e68641fb6

 src/components/Basic/src/BasicTitle.vue

@@ -1,60 +1,84 @@
<template>
  <span class="base-title" :class="{ 'show-span': showSpan && $slots.default }">
    <slot />
    <BasicHelp class="base-title__help" v-if="helpMessage" :text="helpMessage" />
  <span :class="getClass">
    <slot></slot>
    <BasicHelp :class="`${prefixCls}-help`" v-if="helpMessage" :text="helpMessage" />
  </span>
</template>
<script lang="ts">
  import type { PropType } from 'vue';

  import { defineComponent } from 'vue';

  import { defineComponent, computed } from 'vue';
  import BasicHelp from './BasicHelp.vue';
  import { useDesign } from '/@/hooks/web/useDesign';

  const props = {
    /**
     * Help text list or string
     * @default: ''
     */
    helpMessage: {
      type: [String, Array] as PropType<string | string[]>,
      default: '',
    },
    /**
     * Whether the color block on the left side of the title
     * @default: false
     */
    span: { type: Boolean },
    /**
     * Whether to default the text, that is, not bold
     * @default: false
     */
    normal: { type: Boolean },
  };

  export default defineComponent({
    name: 'BasicTitle',
    components: { BasicHelp },
    props: {
      helpMessage: {
        type: [String, Array] as PropType<string | string[]>,
        default: '',
      },
      showSpan: {
        type: Boolean as PropType<boolean>,
        default: false,
      },
    },
    setup() {
      return {};
    props,
    setup(props, { slots }) {
      const { prefixCls } = useDesign('basic-title');

      const getClass = computed(() => [
        prefixCls,
        { [`${prefixCls}-show-span`]: props.span && slots.default },
        { [`${prefixCls}-normal`]: props.normal },
      ]);

      return { prefixCls, getClass };
    },
  });
</script>
<style lang="less" scoped>
  @import (reference) '../../../design/index.less';
  @prefix-cls: ~'@{namespace}-basic-title';

  .base-title {
  .@{prefix-cls} {
    position: relative;
    display: flex;
    padding-left: 7px;
    font-size: 16px;
    font-weight: 700;
    font-weight: 500;
    line-height: 24px;
    color: @text-color-base;
    cursor: pointer;
    user-select: none;

    .unselect();
    &-normal {
      font-size: 14px;
      font-weight: 500;
    }

    &.show-span::before {
    &-show-span::before {
      position: absolute;
      top: 4px;
      left: 0;
      width: 3px;
      height: 16px;
      margin-right: 4px;
      background: @primary-color;
      background-color: @primary-color;
      content: '';
    }

    &__help {
    &-help {
      margin-left: 10px;
    }
  }