vue-pure-admin/src/components/ReFlowChart/src/Control.vue

<script setup lang="ts">
import { ref, unref, onMounted } from "vue";
import { LogicFlow } from "@logicflow/core";

interface Props {
  lf?: LogicFlow;
  catTurboData?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  lf: null
});

const emit = defineEmits<{
  (e: "catData"): void;
}>();

const controlButton3 = ref();
const controlButton4 = ref();

const focusIndex = ref<Number>(-1);
const titleLists = ref([
  {
    icon: "icon-zoom-out-hs",
    text: "缩小",
    size: "18",
    disabled: false
  },
  {
    icon: "icon-enlarge-hs",
    text: "放大",
    size: "18",
    disabled: false
  },
  {
    icon: "icon-full-screen-hs",
    text: "适应",
    size: "15",
    disabled: false
  },
  {
    icon: "icon-previous-hs",
    text: "上一步",
    size: "15",
    disabled: true
  },
  {
    icon: "icon-next-step-hs",
    text: "下一步",
    size: "17",
    disabled: true
  },
  {
    icon: "icon-download-hs",
    text: "下载图片",
    size: "17",
    disabled: false
  },
  {
    icon: "icon-watch-hs",
    text: "查看数据",
    size: "17",
    disabled: false
  }
]);

const onControl = (item, key) => {
  ["zoom", "zoom", "resetZoom", "undo", "redo", "getSnapshot"].forEach(
    (v, i) => {
      const domControl = props.lf;
      if (key === 1) {
        domControl.zoom(true);
      }
      if (key === 6) {
        emit("catData");
      }
      if (key === i) {
        domControl[v]();
      }
    }
  );
};

const onEnter = key => {
  focusIndex.value = key;
};

onMounted(() => {
  props.lf.on("history:change", ({ data: { undoAble, redoAble } }) => {
    unref(titleLists)[3].disabled = unref(controlButton3).disabled = !undoAble;
    unref(titleLists)[4].disabled = unref(controlButton4).disabled = !redoAble;
  });
});
</script>

<template>
  <div class="control-container">
    <!-- 功能按钮 -->
    <ul>
      <li
        v-for="(item, key) in titleLists"
        :key="key"
        :title="item.text"
        class="dark:text-bg_color"
        @mouseenter.prevent="onEnter(key)"
        @mouseleave.prevent="focusIndex = -1"
      >
        <button
          :ref="'controlButton' + key"
          v-tippy="{
            content: item.text
          }"
          :disabled="item.disabled"
          :style="{
            cursor: item.disabled === false ? 'pointer' : 'not-allowed',
            color: item.disabled === false ? '' : '#00000040',
            background: 'transparent',
            border: 'none'
          }"
          @click="onControl(item, key)"
        >
          <span
            :class="'iconfont ' + item.icon"
            :style="{ fontSize: `${item.size}px` }"
          />
        </button>
      </li>
    </ul>
  </div>
</template>

<style scoped>
@import url("./assets/iconfont/iconfont.css");

.control-container {
  background: hsl(0deg 0% 100% / 80%);
  box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
}

.control-container ul li {
  margin: 10px;
  text-align: center;
}

.control-container ul li span:hover {
  color: var(--el-color-primary);
}
</style>