visualization-design/src/views/components/PenEvents.vue

<template>
  <div class="props">
    <div v-if="props.pen.events && props.pen.events.length">
      <t-collapse
        v-model="openedCollapses"
        :borderless="true"
        :expand-on-row-click="true"
        expand-icon-placement="left"
      >
        <t-collapse-panel v-for="(item, i) in props.pen.events" :value="i">
          <template #header>
            <div @click.stop class="head">
              <t-select v-model="item.name" :options="options" autoWidth />
            </div>
          </template>
          <template #headerRightContent>
            <t-space size="small" @click.stop>
              <t-popconfirm
                content="确认删除该交互事件吗"
                placement="left"
                @confirm="props.pen.events.splice(i, 1)"
              >
                <t-icon name="delete" class="hover" />
              </t-popconfirm>
            </t-space>
          </template>

          <Actions :data="props.pen.events[i]" />
        </t-collapse-panel>
      </t-collapse>
      <t-divider />
      <div class="p-16">
        <t-dropdown
          :options="options"
          @click="addEvent"
          :minColumnWidth="254"
          :maxHeight="360"
        >
          <t-button class="w-full" style="height: 30px">
            添加交互事件
          </t-button>
        </t-dropdown>
      </div>
    </div>
    <div class="flex column center blank" v-else>
      <img src="/img/blank.png" />
      <div class="gray center">还没有交互事件</div>
      <div class="mt-8">
        <t-dropdown
          :options="options"
          @click="addEvent"
          :minColumnWidth="150"
          :maxHeight="360"
        >
          <t-button style="height: 30px"> 添加交互事件 </t-button>
        </t-dropdown>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, onUnmounted, ref } from 'vue';

import Actions from './Actions.vue';

const props = defineProps<{
  pen: any;
}>();

const options = ref<any>([
  {
    value: 'click',
    content: '单击',
  },
  {
    value: 'dblclick',
    content: '双击',
    divider: true,
  },
  {
    value: 'enter',
    content: '鼠标移入',
  },
  {
    value: 'leave',
    content: '鼠标移出',
    divider: true,
  },
  {
    value: 'active',
    content: '获得焦点',
  },
  {
    value: 'inactive',
    content: '失去焦点',
    divider: true,
  },
  {
    value: 'mousedown',
    content: '鼠标按下',
  },
  {
    value: 'mouseup',
    content: '鼠标抬起',
    divider: true,
  },
  {
    value: 'message',
    content: '监听消息',
  },
]);

const openedCollapses = ref([0]);

onBeforeMount(() => {
  if (!props.pen.events) {
    props.pen.events = [];
  }

  for (const item of options.value) {
    item.label = item.content;
  }
});

const addEvent = (e: any) => {
  props.pen.events.push({ name: e.value });
};

onUnmounted(() => {});
</script>
<style lang="postcss" scoped>
.props {
  height: 100%;

  .blank {
    height: 70%;
    img {
      padding: 16px;
      opacity: 0.9;
    }
  }

  .head {
    :deep(.t-select) {
      width: fit-content;

      .t-input {
        border-color: transparent;
      }
    }
  }

  .banner {
    background-color: var(--color-background-input);
    padding: 0 12px;
  }
}
</style>