vue实现伸缩

Vue 实现伸缩功能

使用 Vue 实现伸缩功能可以通过动态绑定样式或结合 CSS 过渡效果来实现。以下是几种常见的方法：

动态绑定样式

通过 Vue 的 v-bind:style 动态绑定元素的 height 或 width 属性，结合数据驱动的特性实现伸缩效果。

<template>
  <div>
    <button @click="toggleExpand">Toggle Expand</button>
    <div 
      class="expandable" 
      :style="{ height: isExpanded ? '200px' : '50px' }"
    >
      Content here
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false
    }
  },
  methods: {
    toggleExpand() {
      this.isExpanded = !this.isExpanded;
    }
  }
}
</script>

<style>
.expandable {
  overflow: hidden;
  transition: height 0.3s ease;
  background: #f0f0f0;
}
</style>

使用 Vue 过渡效果

Vue 提供了 <transition> 组件，可以方便地实现伸缩动画效果。

<template>
  <div>
    <button @click="isExpanded = !isExpanded">Toggle Expand</button>
    <transition name="expand">
      <div v-if="isExpanded" class="content">
        Content here
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false
    }
  }
}
</script>

<style>
.content {
  background: #f0f0f0;
  padding: 10px;
}

.expand-enter-active, .expand-leave-active {
  transition: all 0.3s ease;
  max-height: 200px;
}

.expand-enter, .expand-leave-to {
  opacity: 0;
  max-height: 0;
}
</style>

结合 CSS Grid 或 Flexbox

如果需要更复杂的布局伸缩效果，可以结合 CSS Grid 或 Flexbox 实现。

<template>
  <div class="container">
    <button @click="toggleSidebar">Toggle Sidebar</button>
    <div class="layout">
      <div class="sidebar" :class="{ 'collapsed': !isExpanded }">
        Sidebar Content
      </div>
      <div class="main">
        Main Content
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: true
    }
  },
  methods: {
    toggleSidebar() {
      this.isExpanded = !this.isExpanded;
    }
  }
}
</script>

<style>
.layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
}

.sidebar {
  width: 200px;
  background: #f0f0f0;
  transition: width 0.3s ease;
}

.sidebar.collapsed {
  width: 50px;
}

.main {
  background: #e0e0e0;
  padding: 10px;
}
</style>

使用第三方库

如果需要更高级的伸缩功能，可以结合第三方库如 vue-resize 或 element-ui 的 Collapse 组件。

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="Section 1" name="1">
      Content for section 1
    </el-collapse-item>
    <el-collapse-item title="Section 2" name="2">
      Content for section 2
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ['1']
    }
  }
}
</script>

以上方法可以根据实际需求选择适合的方式实现伸缩功能。