时间戳

首页 > 解决方案 > 显示图像/图标时包含文本

vue.js - 显示图像/图标时包含文本

问题描述

目前，当页面上显示图像和/或图标时，我正在尝试包含不同的文本。这是vue文件的代码：

<template>
  <div class="profile">
    <div
      :class="{
        'flags--relevant': hasFlagType('medication'),
        'flags--active': flag == 'medication'
      }"
      class="flags"
      @click="setFlag('medication')"
    >
      <medication-icon
        :class="[
          hasFlagType('medication')
            ? 'medication-icon--focus'
            : 'medication-icon--blur',
        ]"
      />
    </div>
    <div
      :class="{
        'flags--relevant': hasFlagType('condition'),
        'flags--active': flag == 'condition'
      }"
      class="flags"
      @click="setFlag('condition')"
    >
      <treatment-icon
        :class="[
          hasFlagType('condition')
            ? 'treatment-icon--focus'
            : 'treatment-icon--blur',
        ]"
      />
    </div>
    <div
      :class="{
        'flags--relevant': hasFlagType('translator'),
        'flags--active': flag == 'translator',
      }"
      class="flags"
      @click="setFlag('translator')"
    >
      <foreign-dialect-icon
        :class="[
          hasFlagType('translator')
            ? 'foreign-dialect-icon--focus'
            : 'foreign-dialect-icon--blur',
        ]"
      />
    </div>
  </div>
</template>
<script>

export default {
  components: {
    ForeignDialectIcon,
    MedicationIcon,
    TreatmentIcon,
  },
  props: {
    userFlags: {
      type: Array,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      flags: this.userFlags,
      flag: null,
      title: "Requires daily medication",
      title2: "Specialist health condition",
      title3: "Requires a translator",
    };
  },
  methods: {
    hasFlagType(flagType) {
      return this.flags[flagType] !== undefined;
    },
    setFlag(flagType) {
      if (this.hasFlagType(flagType)) {
        this.flag = flagType;
      }
    },
    resetFlag() {
      this.flag = null;
    },
  },
};
</script>

我已经尝试在每个图标的数据部分输出标题，即使图标没有显示，它们仍然显示。我需要它在显示图像时输出标题，而我尝试过的许多尝试都没有奏效，所以想知道我该如何解决这个问题？

标签： vue.jsvue-component

解决方案

假设标题应该只在相应的图标被聚焦时出现，您可以使用相同的条件 ( hasFlagType(...))v-if来呈现title：

<div>
  <medication-icon .../>
  <span v-if="hasFlagType('medication')">{{ title }}</span>
</div>
<div>
  <treatment-icon .../>
  <span v-if="hasFlagType('condition')">{{ title2 }}</span>
</div>
<div>
  <foreign-dialect-icon .../>
  <span v-if="hasFlagType('translator')">{{ title3 }}</span>
</div>

推荐阅读