如何动态调整vue组件中的文本大小

Question

我已经构建了一个应用程序，其中包含可以放入仪表板的不同小部件。每个小部件都包含一个用户希望看到的组件（有点像 grafana，如果您曾经看过它）。

问题：当用户拖动 grid-item 来增加或减小尺寸时，如何更新我的组件内部的 html 以适应新项目的大小？

我尝试过的：

• 尝试将 p 标签包装在 SVG 中并使用视口。
• 尝试将我的尺寸更改为 VW 以按视口动态缩放，但视口不是组件的，而是整个水疗中心的。
• 我尝试使用 this.$parent 获取父级大小，并进行了一些数学运算以获取文本大小并将其动态分配给组件，但这非常混乱。此外，显示的尺寸也不正确。

下面是我使用 vue-grid-layout 包的网格代码

<grid-layout
  ref="widgetGrid"
  :layout.sync="widgets"
  :col-num="12"
  :row-height="verticalSize"
  :is-draggable="editable"
  :is-resizable="editable"
  :is-mirrored="false"
  :responsive="true"
  :autoSize="editable"
  :prevent-collision="false"
  :vertical-compact="false"
  :margin="[10, 10]"
  :use-css-transforms="true"
  @layout-updated="layoutUpdatedEvent"
>
  <grid-item
    :ref="`widget_${widget.i}`"
    v-for="widget in widgets"
    :key="widget.i"
    :x="widget.x"
    :y="widget.y"
    :w="widget.w"
    :h="widget.h"
    :i="widget.i"
    :static="!editable"
  >
    <template>
      <component
        :is="widget.WidgetType"
        :setup="false"
        :widgetConfig="widget.WidgetConfig"
      ></component>
    </template>
  </grid-item>
</grid-layout>

我正在尝试调整其文本大小的组件如下。这是一个 vue 文件，我已经包含了样式。

<template>
  <div>
    <div id="clock">
      <p class="date">{{ date }}</p>
      <p class="time">{{ time }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: '',
      date: '',
      week: ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'],
      ticker: null
    };
  },
  created() {
    this.ticker = setInterval(this.updateTime, 1000);
  },
  mounted() {
    this.showDate =
      this.widgetConfig?.Settings?.find((x) => x.Key === 'ShowDate').Value ||
      false;
    this.showTime =
      this.widgetConfig?.Settings?.find((x) => x.Key === 'ShowTime').Value ||
      false;
  },
  methods: {
    updateTime() {
      let cd = new Date();
      this.time =
        this.zeroPadding(cd.getHours(), 2) +
        ':' +
        this.zeroPadding(cd.getMinutes(), 2) +
        ':' +
        this.zeroPadding(cd.getSeconds(), 2);

      this.date =
        this.zeroPadding(cd.getFullYear(), 4) +
        '-' +
        this.zeroPadding(cd.getMonth() + 1, 2) +
        '-' +
        this.zeroPadding(cd.getDate(), 2) +
        ' ' +
        this.week[cd.getDay()];
    },
    zeroPadding(num, digit) {
      let zero = '';
      for (let i = 0; i < digit; i++) {
        zero += '0';
      }
      return (zero + num).slice(-digit);
    }
  },
};
</script>

<style lang="scss" scoped>
html,
body {
  height: 100%;
}
body {
  background: #0f3854!important;
  background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%)!important;
  background-size: 100%;
}
p {
  margin: 0;
  padding: 0;
}
#clock {
  font-family: 'Share Tech Mono', monospace;
  color: #ffffff;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #daf6ff;
  text-shadow: 0 0 20px rgba(10, 175, 230, 1), 0 0 20px rgba(10, 175, 230, 0);
  .time {
    letter-spacing: 0.05em;
    font-size: 1vw;
    padding: 5px 0;
  }
  .date {
    letter-spacing: 0.1em;
    font-size: 1vw;
  }
  .text {
    letter-spacing: 0.1em;
    font-size: 1vw;
    padding: 20px 0 0;
  }
}
</style>

Nuxt 配置

module.exports = {
  head: {
    titleTemplate: '',
    title: 'QVue',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'QVue Web UI' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },
  css: [],
  plugins: [
    { src: '@/plugins/vueGrid', ssr: false }
  ],
  publicRuntimeConfig: {},
  privateRuntimeConfig: {},
  components: true,
  buildModules: [
    '@nuxtjs/vuetify'
  ],
  modules: [
    '@nuxtjs/axios'
  ],
  axios: {
  },
  build: {
  },
  render: {
    compressor: false,
  },
  srcDir: 'client/',
};

Answer 1

如果您想调整clock 组件的文本大小，一种解决方案是使用您已经提到的svg -> viewbox。但是你需要使用<text> 而不是<p>。

下面是演示：

Vue.component('v-clock',{
    template:`
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <text x="0" y="25" fill="red">{{date}}</text>
        <text x="0" y="75" fill="red">{{time}}</text>
      </svg>
    `,
  data() {
    return {
      time: '',
      date: '',
      week: ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'],
      ticker: null
    };
  },
  created() {
    this.ticker = setInterval(this.updateTime, 1000);
  },
  mounted() {
    this.showDate =
      this.widgetConfig?.Settings?.find((x) => x.Key === 'ShowDate').Value ||
      false;
    this.showTime =
      this.widgetConfig?.Settings?.find((x) => x.Key === 'ShowTime').Value ||
      false;
  },
  methods: {
    updateTime() {
      let cd = new Date();
      this.time =
        this.zeroPadding(cd.getHours(), 2) +
        ':' +
        this.zeroPadding(cd.getMinutes(), 2) +
        ':' +
        this.zeroPadding(cd.getSeconds(), 2);

      this.date =
        this.zeroPadding(cd.getFullYear(), 4) +
        '-' +
        this.zeroPadding(cd.getMonth() + 1, 2) +
        '-' +
        this.zeroPadding(cd.getDate(), 2) +
        ' ' +
        this.week[cd.getDay()];
    },
    zeroPadding(num, digit) {
      let zero = '';
      for (let i = 0; i < digit; i++) {
        zero += '0';
      }
      return (zero + num).slice(-digit);
    }
  }
})

new Vue ({
  el:'#app',
  data () {
    return {
      size: 100
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <input v-model.number="size" type="range" min="50" max="500"/>
  <div :style="{width: size + 'px', height: size + 'px'}" style="border: solid 1px blue">
    <v-clock></v-clock>
  </div>
</div>