用vue 做一个 浏览器缩放最小百分比就是100%

你可以使用 Vue 的计算属性和 watch 特性来实现这个功能。首先，你需要使用一个计算属性 `scale` 来计算当前页面的缩放比例：

<template>
  <div :style="{ transform: `scale(${scale})` }">
    <!-- Content goes here -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      minWidth: 1000, // 最小宽度
      minHeight: 600, // 最小高度
      scale: 1, // 缩放比例
    };
  },
  computed: {
    screenWidth() {
      return window.innerWidth;
    },
    screenHeight() {
      return window.innerHeight;
    },
  },
  watch: {
    screenWidth() {
      this.updateScale();
    },
    screenHeight() {
      this.updateScale();
    },
  },
  mounted() {
    this.updateScale();
  },
  methods: {
    updateScale() {
      const scaleX = this.screenWidth / this.minWidth;
      const scaleY = this.screenHeight / this.minHeight;
      this.scale = Math.max(1, Math.min(scaleX, scaleY));
    },
  },
};
</script>

这个组件会在页面加载时自动计算出当前的缩放比例，并将其应用到 `div` 元素上。当用户调整浏览器窗口大小时，会自动更新缩放比例。注意，我们使用了 `Math.max(1, Math.min(scaleX, scaleY))` 来确保缩放比例不会小于 1，这样就可以避免页面缩小过小而无法正常显示的问题。