postya

data:() ({
hasText: false
})

meathods: {
showText() {
this.hasText = true
}

hideText() {
this.hasText = false
}
}

<div class="flag flag--ru" @mouseover="showText" @mouseleave="hideText">
      <svg>
         <use xlink:href="@/assets/svg/svg.svg#flag-ru"></use>
       </svg>
</div>

<p v-if="hasText">any text</p>

<template>
  <div class="login">
    <div class="container">
      <h1>Login</h1>
      <form class="form" @submit.prevent="login">
        <input
          type="text"
          placeholder="username"
          v-model.trim="form.username"
          :class="$v.form.username.$error ? 'invalid-feedback' : ''"
          class="input"
        />
        <span :class="$v.form.username.$error ? 'showError' : 'hideError'"
          >Username is required</span
        >
        <input
          type="password"
          placeholder="password"
          v-model.trim="form.password"
          :class="$v.form.password.$error ? 'invalid-feedback' : ''"
          class="input"
        />
        <span :class="$v.form.password.$error ? 'showError' : 'hideError'"
          >Password is required</span
        >
        <div class="button">
          <button class="btn-login">Login</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import { required } from 'vuelidate/lib/validators'

export default {
  name: 'login',
  head() {
    return {
      title: 'Login',
      meta: [
        {
          hid: 'login',
          name: 'login',
          content: 'login content',
        },
      ],
    }
  },
  data: () => ({
    form: {
      username: '',
      password: '',
    },
  }),
  methods: {
    login() {
      this.$v.form.$touch()
      if (this.$v.form.$error) {
        return
      }
      console.log('success')
    },
  },
  mounted() {},
  validations: {
    form: {
      username: { required },
      password: { required },
    },
  },
}
</script>

<template>
  <div class="connector">
    <p>{{connector}}</p>
  </div>
</template>

<script>
  export default {
    name: "Connector",
    data() {
      return {
        sections: {
          length: ""
        },
      }
    },
    props: {
      connector: String
    }
  }
</script>

<template>
  <div class="module">
       <Connector class="connector con1" :connector="input1"/>
    <Connector class="connector con2" :connector="input2"/>
    <Connector class="connector con3" :connector="output1"/>
    <Connector class="connector con4" :connector="output2"/>
  </div>
</template>

<script>
  import Connector from "components/Connector";
  export default {
    name: "Module",
    components: {Connector},
    data() {
      return {
        input1: 'input1',
        input2: 'input2',
        output1: 'output1',
        output2: 'output2'
      }
    }
  }
</script>

.notices .toast .toast-icon {
  height: 31px !important;
  width: 31px !important;
  min-width: 31px !important;
}

<div class="question-card" ref="card">
      <p
        class="question-text"
        ref="cardText"
        :style="{ fontSize: fontSize + 'rem' }"
      >
        {{ text }}
      </p>
    </div>

<script>
export default {
  beforeCreate() {
    this.calculateFontSize();
  },
  mounted() {
    this.calculateFontSize();
  },
  data: () => ({
    textWidth: 0,
    cardWidth: 0,
    cardHeight: 0,
    textHeight: 0,
    fontSize: 6,
    text:
      "there is an ejecting or lifting force, acting on a body immersed in a liquid or gas, which is equal to the weight of the volume of the liquid or gas displaced by the part of the body immersed in the liquid or gas –Law of Archimedes\n",
    options: {
      minSize: 11,
      maxSize: 120
    }
  }),
  created() {
    window.addEventListener("resize", this.calculateFontSize);
  },
  destroyed() {
    window.removeEventListener("resize", this.calculateFontSize);
  },
  methods: {
    calculateFontSize() {
      //get font size of text and card height
      let fontSize = this.fontSize;
      let textHeight = this.$refs.cardText.clientHeight;
      let cardHeight = this.$refs.card.clientHeight - 50;

      //compare card height and text height
      if (textHeight >= cardHeight) {
        this.fontSize = fontSize - 0.1;
      } else if (textHeight < cardHeight) {
        this.fontSize = fontSize + 0.1;
      }

      //apply card width and height to category text when resizing window
      this.cardWidth = this.$refs.card.clientWidth;
      this.cardHeight = this.$refs.card.clientHeight;
      this.textWidth = this.$refs.cardText.clientWidth;
      this.textHeight = this.$refs.cardText.clientHeight;
    }
  }
};
</script>

let fontSize = this.fontSize;
      let textHeight = this.$refs.cardText.clientHeight;
      let cardHeight = this.$refs.card.clientHeight - 50;

if (textHeight >= cardHeight) {
        this.fontSize = fontSize - 0.1;
      } else if (textHeight < cardHeight) {
        this.fontSize = fontSize + 0.1;
      }

this.cardWidth = this.$refs.card.clientWidth;
      this.cardHeight = this.$refs.card.clientHeight;
      this.textWidth = this.$refs.cardText.clientWidth;
      this.textHeight = this.$refs.cardText.clientHeight;