<script setup>
import { JsvTextBox } from "jsview";
const props = defineProps({
  text: String,
  moveCount: Number,
})
</script>

<template>
  <div :style="{ top: 50 }">
    <div :style="{
      left: 0,
      top: -50,
      width: 400,
      height: 50,
      fontSize: 20,
      textAlign: 'left',
      lineHeight: 50,
      backgroundColor: '#00ff00',
    }">
      整体向上对齐、文字居左显示
    </div>
    <JsvTextBox :verticalAlign="'top'" :style="{
      left: 0,
      top: 0,
      width: 400,
      height: 300,
      backgroundColor: 'rgba(255,255,0,0.5)',
      fontSize: 30,
      textAlign: 'left',
      lineHeight: 40,
    }">
      {{ `测试文字变化能引起刷新: [${props.moveCount}]\n[TL]${props.text}` }}
    </JsvTextBox>
    <div :style="{
      left: 410,
      top: -50,
      width: 400,
      height: 50,
      fontSize: 20,
      textAlign: 'left',
      lineHeight: 50,
      backgroundColor: '#00ff00',
    }">
      整体垂直居中对齐、文字水平居左显示
    </div>
    <JsvTextBox :verticalAlign="'middle'" :style="{
      left: 410,
      top: 0,
      width: 400,
      height: 300,
      backgroundColor: 'rgba(255,255,0,0.5)',
      fontSize: 30,
      textAlign: 'left',
      lineHeight: 40,
    }">
      {{ `[ML]${props.text}` }}
    </JsvTextBox>
    <div :style="{
      left: 820,
      top: -50,
      width: 400,
      height: 50,
      fontSize: 20,
      textAlign: 'left',
      lineHeight: 50,
      backgroundColor: '#00ff00',
    }">
      整体垂直向下对齐、文字水平居左显示
    </div>
    <JsvTextBox :verticalAlign="'bottom'" :style="{
      left: 820,
      top: 0,
      width: 400,
      height: 300,
      backgroundColor: 'rgba(255,255,0,0.5)',
      fontSize: 30,
      textAlign: 'left',
      lineHeight: 40,
    }">
      {{ `[BL]${props.text}` }}
    </JsvTextBox>
    <div :style="{
      left: 1240,
      top: -50,
      width: 500,
      height: 50,
      fontSize: 20,
      textAlign: 'left',
      lineHeight: 50,
      backgroundColor: '#00ff00',
    }">
      整体垂直向上对齐、文字水平居左显示、行高80px
    </div>
    <JsvTextBox :verticalAlign="'top'" :style="{
      left: 1240,
      top: 0,
      width: 500,
      height: 300,
      backgroundColor: 'rgba(255,255,0,0.5)',
      fontSize: 30,
      textAlign: 'left',
      lineHeight: 80,
    }" className="test">
      {{ `[TL]${props.text}` }}
    </JsvTextBox>
  </div>
</template>

<style scoped>
.test {
  color: #007788
}
</style>