<el-image style=“width: 100px; height: 100px” :src=“url” :preview-src-list=“srcList”> </el-image>图片拖动或者放大时不能超出浏览器边框，代码怎么写

在 Element UI 的 `<el-image>` 组件中，如果需要限制图片拖动或缩放时不超出浏览器边框，可以利用 CSS 来控制。首先，你需要确保图像容器有合适的定位属性（如 `position`），然后设置其最大宽度（`max-width`）和最大高度（`max-height`）。下面是一个示例：

<template>
  <div class="image-container">
    <el-image
      :style="{ width: '100px', height: '100px' }"
      :src="imageUrl"
      :preview-src-list="srcList"
      ref="imgRef" // 添加 ref 属性以便获取元素引用
    ></el-image>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
      srcList: [],
      imgRef: null,
    };
  },
  methods: {
    handleDragStart(e) {
      e.preventDefault(); // 阻止默认的拖动行为
      this.imgRef.style.position = 'absolute'; // 设置绝对定位
      this.handleMouseMove(e);
    },
    handleMouseMove(e) {
      const { clientX, clientY } = e;
      const maxLeft = window.innerWidth - this.$refs.imgRef.offsetWidth;
      const maxTop = window.innerHeight - this.$refs.imgRef.offsetHeight;

      if (clientX > maxLeft) {
        this.imgRef.style.left = `${maxLeft}px`;
      } else {
        this.imgRef.style.left = `${clientX}px`;
      }

      if (clientY > maxTop) {
        this.imgRef.style.top = `${maxTop}px`;
      } else {
        this.imgRef.style.top = `${clientY}px`;
      }
    },
  },
  mounted() {
    this.imgRef = this.$refs.imgRef; // 初始化ref
  },
};
</script>

<style scoped>
.image-container {
  position: relative;
  overflow: hidden; // 隐藏溢出内容
}
</style>

在这个例子中，我们在组件挂载后添加了 `ref` 属性，并在 `handleDragStart` 和 `handleMouseMove` 方法中动态调整图片的位置，使其不会超出窗口边界。