gypsy-crm-frontend-vu/components/cwg-droplist-item.vue

<template>
  <view class="cwg-droplist-item" :class="{ 'is-disabled': disabled }" @click.stop="handleClick">
    <slot></slot>
  </view>
</template>

<script setup>
import { getCurrentInstance } from 'vue'

const props = defineProps({
  command: {
    type: [String, Number, Object],
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const instance = getCurrentInstance()
const emit = defineEmits(['click'])

const handleClick = () => {
  if (props.disabled) return
  
  emit('click')
  
  // 查找父级的 cwg-droplist 实例并触发事件
  let parent = instance.parent
  while (parent) {
    if (parent.type.__file && parent.type.__file.includes('cwg-droplist.vue')) {
      if (parent.exposed && parent.exposed.handleItemClick) {
        parent.exposed.handleItemClick(props.command)
      }
      break
    }
    parent = parent.parent
  }
}
</script>

<style lang="scss" scoped>
@import '@/uni.scss';

.cwg-droplist-item {
  display: flex;
  align-items: center;
  padding: px2rpx(10) px2rpx(20);
  font-size: px2rpx(14);
  line-height: px2rpx(22);
  color: var(--bs-emphasis-color);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  box-sizing: border-box;

  &:hover, &:active {
    background-color: var(--bs-light-bg-subtle);
    color: var(--bs-emphasis-color);
  }

  &.is-disabled {
    color: #c0c4cc;
    cursor: not-allowed;
    background-color: transparent;
  }
}
</style>