在svelte中调整平滑容器大小

<script>
  import { onMount, afterUpdate } from 'svelte';

  let containerWidth = 200; // 初始容器宽度

  // 监听窗口大小变化，更新容器宽度
  onMount(() => {
    window.addEventListener('resize', updateContainerWidth);
  });

  afterUpdate(() => {
    updateContainerWidth();
  });

  function updateContainerWidth() {
    containerWidth = document.getElementById('container').clientWidth;
  }
</script>

<style>
  #container {
    width: {containerWidth}px;
    transition: width 0.3s ease; // 平滑过渡效果
    background-color: #f0f0f0;
    padding: 10px;
  }

  #trigger {
    cursor: col-resize;
  }
</style>

<div id="container">
  <!-- 内容 -->
</div>

<div id="trigger" on:mousedown={startResize}></div>

<script>
  let startX;
  let startWidth;

  function startResize(event) {
    startX = event.clientX;
    startWidth = containerWidth;

    window.addEventListener('mousemove', resize);
    window.addEventListener('mouseup', stopResize);
  }

  function resize(event) {
    const deltaX = event.clientX - startX;
    containerWidth = startWidth + deltaX;
  }

  function stopResize() {
    window.removeEventListener('mousemove', resize);
    window.removeEventListener('mouseup', stopResize);
  }
</script>