goview_vue/src/components/AppleControlBtn/index.vue

<template>
  <div class="go-apple-control-btn">
    <template v-for="item in filterBtnList" :key="item.key">
      <div
        class="btn"
        :class="[item.key, disabled && 'disabled']"
        @click="handleClick(item.key)"
      >
        <n-icon size="10" class="icon-base" :class="{ hover: !disabled }">
          <component :is="item.icon" />
        </n-icon>
      </div>
    </template>
  </div>
</template>
<script lang="ts" setup>
import { icon } from '@/plugins'
import { computed } from 'vue'
import { screenfullFn } from '@/utils'

const emit = defineEmits(['close', 'remove', 'resize', 'fullResize'])

const props = defineProps({
  // 禁用所有按钮
  disabled: {
    request: false,
    type: Boolean,
    default: false
  },
  // 要隐藏的按钮
  hidden: {
    request: false,
    type: Array,
    default: []
  },
  // 使用全屏功能
  narrow: {
    request: false,
    type: Boolean,
    default: false
  }
})

const { CloseIcon, RemoveIcon, ResizeIcon } = icon.ionicons5

const filterBtnList = computed(() => {
  const res = btnList.filter(e => {
    return props.hidden.findIndex(p => e.key == p) === -1
  })
  return res
})

const isFull = computed(() => {
  return props.narrow && screenfullFn(true)
})
const btnList = [
  {
    title: '关闭',
    key: 'close',
    icon: CloseIcon
  },
  {
    title: '缩小',
    key: 'remove',
    icon: RemoveIcon
  },
  {
    title: isFull ? '缩小' : '放大',
    key: props.narrow ? 'fullResize' : 'resize',
    icon: ResizeIcon
  }
]

const handleClick = (key: 'close' | 'remove' | 'resize' | 'fullResize') => {
  if (key === 'fullResize') screenfullFn()
  // 缩小并关闭全屏
  if (key === 'remove') screenfullFn(true) && screenfullFn()
  emit(key)
}
</script>

<style lang="scss" scoped>
@include go('apple-control-btn') {
  display: flex;
  &:hover {
    .btn {
      .hover {
        cursor: pointer;
        opacity: 1;
      }
    }
  }
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin: 0 4px;
    color: $--color-text;
    font-weight: bold;
    border-radius: 50%;
    &.disabled {
      pointer-events: none;
    }
    .icon-base {
      opacity: 0;
    }
    .hover {
      @extend .go-transition;
    }
  }
  .close {
    background-color: $--color-red;
  }
  .remove {
    background-color: $--color-warn;
  }
  .resize,
  .fullResize {
    background-color: $--color-success;
  }
}
</style>