新增历史轨迹菜单

riku

2024-05-08 d0f5933cb7fe9196ca0250252efc820a1a9d947e

 src/components/BaseCard.vue

@@ -6,6 +6,12 @@
        <slot name="content"></slot>
      </div>
    </div>
    <div class="ff-footer">
      <slot name="footer"></slot>
    </div>
    <div v-if="type == 'content' && size == 'medium'" class="ff-triangle">
      <div class="ff-triangle-border"></div>
    </div>
  </div>
</template>

@@ -14,8 +20,16 @@
export default {
  props: {
    /**
     * 类型
     * content | btn
     */
    type: {
      type: String,
      default: 'content'
    },
    /**
     * 样式折角大小
     * small | medium
     * small | medium | middle-s
     */
    size: {
      type: String,
@@ -23,19 +37,37 @@
    },
    /**
     * 样式朝向
     * left | right
     * content: left | right | top-left | down
     * btn: left | right | down
     */
    direction: {
      type: String,
      default: 'left'
    },
    /**
     * 选择无边框方向
     * r（右侧无边框） | t（顶部无边框）
     */
    borderless: {
      type: String
    }
  },
  computed: {
    wrapClz() {
      let clz = 'ff-content fy-container';
      clz += ` ff-content-${this.size}`;
      clz += ` ff-content-${this.direction}`;
      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 '';
      }
    }
  }
};