完成折线图相关功能的迁移

riku

2024-05-07 c4e9d054916c3f085329a67c7664b4c54f9137f9

 src/components/BaseCard.vue

@@ -9,7 +9,7 @@
    <div class="ff-footer">
      <slot name="footer"></slot>
    </div>
    <div v-if="size != 'small'" class="ff-triangle">
    <div v-if="type == 'content' && size != 'small'" class="ff-triangle">
      <div class="ff-triangle-border"></div>
    </div>
  </div>
@@ -20,8 +20,16 @@
export default {
  props: {
    /**
     * 类型
     * content | btn
     */
    type: {
      type: String,
      default: 'content'
    },
    /**
     * 样式折角大小
     * small | medium
     * small | medium | middle-s
     */
    size: {
      type: String,
@@ -29,7 +37,8 @@
    },
    /**
     * 样式朝向
     * left | right | top-left
     * content: left | right | top-left | down
     * btn: left | right | down
     */
    direction: {
      type: String,
@@ -45,11 +54,20 @@
  },
  computed: {
    wrapClz() {
      let clz = 'ff-content p-events-auto';
      clz += ` ff-content-${this.direction}`;
      clz += ` ff-content-${this.size}`;
      clz += `${this.borderless ? '-borderless-' + this.borderless : ''}`;
      return clz;
      if (this.type == 'content') {
        let clz = 'ff-content p-events-auto';
        clz += ` ff-content-${this.direction}`;
        clz += ` ff-content-${this.size}`;
        clz += `${this.borderless ? '-borderless-' + this.borderless : ''}`;
        return clz;
      } else if (this.type == 'btn') {
        let clz = 'ff-toggle-btn p-events-auto';
        clz += ` ff-toggle-btn-${this.direction}`;
        clz += ` ff-btn-${this.size}`;
        return clz;
      } else {
        return '';
      }
    }
  }
};