vue实现选择置顶

Vue 实现选择置顶功能

在 Vue 中实现选择置顶功能，可以通过操作数据数组或结合 CSS 样式来实现。以下是几种常见的实现方法：

数组排序法

通过操作数据数组，将被选中的项移动到数组首位：

// 在 Vue 组件中
data() {
  return {
    items: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ]
  }
},
methods: {
  pinItem(item) {
    const index = this.items.findIndex(i => i.id === item.id)
    if (index > -1) {
      this.items.splice(index, 1)
      this.items.unshift(item)
    }
  }
}

模板部分：

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
    <button @click="pinItem(item)">置顶</button>
  </li>
</ul>

使用计算属性

通过计算属性对数据进行排序，保持原始数据不变：

computed: {
  sortedItems() {
    return [...this.items].sort((a, b) => {
      if (a.pinned && !b.pinned) return -1
      if (!a.pinned && b.pinned) return 1
      return 0
    })
  }
},
methods: {
  togglePin(item) {
    item.pinned = !item.pinned
  }
}

CSS 定位法

使用 CSS 的 order 属性来控制显示顺序：

<div class="item-container">
  <div 
    v-for="item in items" 
    :key="item.id"
    :class="{ pinned: item.pinned }"
    @click="togglePin(item)"
  >
    {{ item.name }}
  </div>
</div>

.item-container {
  display: flex;
  flex-direction: column;
}
.item-container div {
  order: 1;
}
.item-container div.pinned {
  order: 0;
  background-color: #f0f0f0;
}

结合 Vuex 的状态管理

当应用较大时，可以使用 Vuex 管理置顶状态：

// store.js
export default new Vuex.Store({
  state: {
    items: [...]
  },
  mutations: {
    pinItem(state, itemId) {
      const item = state.items.find(i => i.id === itemId)
      if (item) {
        item.pinned = true
      }
    }
  }
})

组件中使用：

methods: {
  pinItem(itemId) {
    this.$store.commit('pinItem', itemId)
  }
}

动画效果增强

可以为置顶操作添加过渡动画：

<transition-group name="list" tag="ul">
  <li v-for="item in sortedItems" :key="item.id">
    {{ item.name }}
    <button @click="togglePin(item)">
      {{ item.pinned ? '取消置顶' : '置顶' }}
    </button>
  </li>
</transition-group>

.list-move {
  transition: transform 0.5s;
}

以上方法可以根据具体需求选择或组合使用，实现灵活的选择置顶功能。