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

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

问题：当用户拖动网格项以增加或减少大小时，如何更新my component中的html以调整新项的大小

我所尝试的：

• 尝试在SVG中包装p标记并使用视口
• 尝试将“我的大小”更改为VW，以按视口动态缩放，但视口不是组件的大小，而是整个spa的大小
• 我尝试使用这个.parent获取父级大小，并做了一些数学运算来获取文本大小并动态地将其分配给组件，但这非常混乱。而且，显示的尺寸不正确

下面是我使用vue网格布局包的网格代码

<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>

---

如果您想调整

时钟

组件的文本大小，一种解决方案是使用前面提到的

svg->viewbox

。但是您需要使用

而不是

以下是演示：

Vue.component（'v-clock'{
模板：`
{{date}}
{{time}}
`,
数据（）{
返回{
时间：''，
日期：''，
周：[星期一、星期一、星期二、星期三、星期四、星期五、星期六]，
股票代码：空
};
},
创建（）{
this.ticker=setInterval（this.updateTime，1000）；
},
安装的（）{
这个是showDate=
此.widgetConfig？.Settings？.find（（x）=>x.Key==='ShowDate'）.Value||
虚假的；
这是表演时间=
此.widgetConfig？.Settings？.find（（x）=>x.Key==='ShowTime'）.Value||
虚假的；
},
方法：{
更新时间（）{
设cd=新日期（）；
这次=
这是一个.zeroppadding（cd.getHours（），2）+
':' +
这是一个.zeroppadding（cd.getMinutes（），2）+
':' +
这是.zeroppadding（cd.getSeconds（），2）；
这个日期=
这个.zeroppadding（cd.getFullYear（），4）+
'-' +
这个.zeroppadding（cd.getMonth（）+1,2）+
'-' +
这是一个.zeroppadding（cd.getDate（），2）+
' ' +
本周[cd.getDay（）]；
},
零填充（数字，数字）{
设零=“”；
for（设i=0；i

别忘了在

销毁中
清除超时
。@MichalLevý感谢您的推荐！为了使svg元素在nuxt中具体工作，除了您的演示之外，我还需要做些什么。你的建议是我尝试的第一件事。当我使用vue dev工具检查它时，我看到所有数据都设置正确，组件出现了，但当我使用svg时，没有一个html元素呈现出来。我从字面上复制了你的组件html内容，并删除了该组件中的所有其他内容。你能将你的
numxt.config.js
添加到问题中吗？您的终端或浏览器控制台中有错误吗？控制台中没有错误。已添加Nuxt config。我无法重现您遇到的问题（请检查此问题）。我能够实现vue网格包，并结合我们的示例使其正常工作，但遇到了我将处理的其他问题。我认为你提供了正确的答案，只是出于某种原因，它不能在我的本地nuxt服务器上工作，这是我必须弄清楚的。非常感谢今天的帮助！
<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>


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/',
};