mky-vent-base/src/views/vent/home/configurable/green/components/header-green.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <!-- Header部分 -->
  <div v-if="headerConfig.show" class="w-100% flex costume-header">
    <!-- 选择下拉框，自动填充剩余空间，这种实现是因为 Select 不支持 suffix -->
    <Dropdown
      v-if="headerConfig.selector.show"
      class="flex-grow-1 "
      :class="headerConfig.slot.show ? 'costume-header_left' : 'costume-header_left1' "
      :trigger="['click']"
      :bordered="false"
      @open-change="visible = $event"
    >
      <div class="flex-basis-60% flex flex-items-center" @click.prevent>
        <!-- <SwapOutlined class="w-30px" /> -->
        <div class="w-100px flex-grow-1 overflow-hidden whitespace-nowrap text-ellipsis select-text">
          {{ selectedDeviceLabel }}
        </div>
        <CaretUpOutlined class="w-30px" v-if="visible" />
        <CaretDownOutlined class="w-30px" v-else />
      </div>
      <template #overlay>
        <Menu :selected-keys="[selectedDeviceID]" @click="selectHandler">
          <MenuItem v-for="item in options" :key="item.value" :title="item.label">
            {{ item.label }}
          </MenuItem>
        </Menu>
      </template>
    </Dropdown>
    <template v-if="headerConfig.slot.show">
      <div class="flex-basis-40% flex flex-items-center flex-grow-1 costume-header_right select-text">
        <!-- <SwapOutlined class="w-30px" /> -->
        <div class="flex-grow-1">
          {{ selectedDeviceSlot }}
        </div>
      </div>
    </template>
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { Config } from '../../../../deviceManager/configurationTable/types';
  import { useInitModule } from '../../hooks/useInit';
  import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
  import { SwapOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';

  const props = defineProps<{
    moduleData: Config['moduleData'];
    deviceType: Config['deviceType'];
    data: any;
  }>();

  const emit = defineEmits(['select']);

  const visible = ref(false);
  const headerConfig = props.moduleData.header;
  const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, init } = useInitModule(
    props.deviceType,
    props.moduleData
  );

  function selectHandler({ key }) {
    selectedDeviceID.value = key;
    emit('select', selectedDevice.value);
  }

  watch(
    () => props.data,
    (d) => {
      init(d);
      emit('select', selectedDevice.value);
    },
    {
      immediate: true,
    }
  );
</script>
<style scoped>
  @import '/@/design/theme.less';

  .costume-header {
    height: 30px;
    /* background-image: linear-gradient(90deg, var(--vent-base-light-bg-opcity), transparent 20%, transparent 80%, var(--vent-base-light-bg-opcity)); */
    /* background:url('../../../../../assets/images/home-green/green-select-bg.png') no-repeat; */
    background:url('@/assets/images/home-green/green-select-bg.png') no-repeat;
    background-size:100% 100%;
  }
  .costume-header_left {
    /* border-left: 3px solid; */
    border-right: 3px solid;
    border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
    border-image-slice: 1;
  }
  .costume-header_left1 {
    border-image-slice: 1;
  }
  /* .costume-header_right {
    border-right: 3px solid;
    border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
    border-image-slice: 1;
  } */
   .select-text{
    padding-left:26px;
   }

  ::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
    /* background-color: transparent; */
    color: #fff;
  }
  ::v-deep .zxm-select-arrow {
    color: #fff;
  }
  ::v-deep .zxm-select-selection-item {
    color: #fff !important;
  }
  ::v-deep .zxm-select-selection-placeholder {
    color: #fff !important;
  }
</style>