NanjingMuseumWuJinZang-PC/src/components/OperationTip.vue

<template>
  <Transition name="fade-out">
    <div
      v-show="isShow"
      class="operation-tip"
    >
      <img
        class=""
        :src="
          require(`@/assets/images/icon_operation_${props.direction}_${props.color}.png`)
        "
        alt=""
        draggable="false"
      >
      <div
        v-if="props.text"
        class="text"
      >
        {{ props.text }}
      </div>
    </div>
  </Transition>
</template>

<script setup>
import useSizeAdapt from "@/useFunctions/useSizeAdapt"
import { ref, computed, watch } from "vue"

const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()

const props = defineProps({
  direction: {
    type: String,
    default: "v", // h
  },
  color: {
    type: String,
    default: "white", // 'green'
  },
  text: {
    type: String,
    default: "",
  },
  isShow: {
    type: Boolean,
    default: true,
  },
})

const color = computed(() => {
  if (props.color === "white") {
    return "#fff"
  } else if (props.color === "green") {
    return "#7B916B"
  } else {
    return props.color
  }
})

const isShow = ref(true)
const propIsShow = computed(() => {
  return props.isShow
})
watch(propIsShow, (v) => {
  if (!v) {
    isShow.value = false
  }
})
// setTimeout(() => {
//   isShow.value = false
// }, 2000)
</script>

<style lang="less" scoped>
.operation-tip {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  > .text {
    color: v-bind("color");
    margin-right: 5px;
    font-family: KaiTi;
    font-weight: 400;
    font-size: 20px;
  }
  > img {
    width: 40px;
    height: 41px;
  }
}
</style>