Vue3 自定义指令裂图 用生命周期setup 实现

Vue3 中的自定义指令（Custom Directive）是一种强大的功能，允许开发者扩展HTML元素的行为。对于“裂图”效果，通常是指当内容超出容器尺寸时，会自动调整布局以适应屏幕大小。在 Vue3 的 setup 阶段实现自定义指令，你可以按照以下步骤操作：

1. 定义一个名为 `split-image` 的自定义指令，它会接收两个参数：`v-bind:image` 和 `v-bind:max-width`（假设你希望限制最大宽度）。

import { ref } from 'vue';

export default {
  directives: {
    splitImage: {
      inserted: (el, binding) => {
        const imgRef = ref(null);
        let maxWidth = parseInt(binding.value.maxWidth);

        el.addEventListener('load', () => {
          if (imgRef.value.naturalWidth > maxWidth) {
            // 当图片加载完成且宽度超过maxWidth时，计算新的布局比例
            const ratio = maxWidth / imgRef.value.naturalWidth;
            el.style.transform = `scale(${ratio})`;
          }
        });

        imgRef.value = new Image();
        imgRef.value.src = binding.value.image;
      },
      update(value) {
        if (value.image && value.maxWidth) {
          // 更新图片源和maxWidth，如果有必要更新布局
          this.inserted[0].imgRef.value.src = value.image;
          this.inserted[0].imgRef.value.width = null; // 强制重新计算宽度
        }
      },
      unbind(el) {
        el.removeEventListener('load', handleLoad);
      },
    },
  },
};

2. 在模板中使用这个自定义指令，如 `<div v-split-image:image="imageUrl" v-bind:max-width="maxWidth"></div>`。

3. 在 `setup` 函数中设置组件的数据（例如 `imageUrl` 和 `maxWidth`），并传递给指令。

setup() {
  const imageUrl = 'https://example.com/image.jpg';
  const maxWidth = 600;

  return {
    imageUrl,
    maxWidth,
  };
}