<template>
<div>
<div style="width: 900px; margin: 30px 50px;">
<el-button type="primary" plain @click="insert">insert</el-button>
<el-button type="primary" plain @click="insertRandom">insert at random index</el-button>
<el-button type="danger" plain @click="del">del</el-button>
<el-button type="info" plain @click="shuffle">shuffle</el-button>
<el-button type="info" plain @click="reverse">reverse</el-button>
<el-button type="warning" plain @click="reset">reset</el-button>
<el-button type="success" plain @click="sort">sort</el-button>
<TransitionGroup tag="ul" name="fade" class="container">
<div v-for="item in items" class="item" :key="item">
{{ item }}
<button @click="remove(item)">x</button>
</div>
</TransitionGroup>
</div>
</div>
</template>
<!--
通过内建的 <TransitionGroup> 实现“FLIP”列表过渡效果。
https://aerotwist.com/blog/flip-your-animations/
-->
<script>
// Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库 (安装 npm i lodash-es)
import { shuffle, cloneDeep, throttle, debounce } from 'lodash-es'
const getInitialItems = () => [1, 2, 3, 4, 5]
let id = getInitialItems().length + 1
export default {
data() {
return {
items: getInitialItems(),
delMessage: '最少预留一条数据',
}
},
methods: {
remove(item) {
if (this.items.length > 1) {
const i = this.items.indexOf(item)
if (i > -1) {
this.items.splice(i, 1)
}
// 方法二: 使用新的数组替代原数组,过滤掉当前被选中的值
// this.items = this.items.filter((t) => t !== item)
} else {
this.delMessageWarn()
}
},
insert() {
// max 每次从最大数开始增加
var max = Math.max.apply(null, this.items);
this.items.push(max + 1)
},
del() {
debugger
if (this.items.length > 1) {
//获取数组中最大值的下标
let arr = this.items
//声明了个变量 保存下标值
var max = arr[0];
var maxIndex = 0;
for (var i = 0; i < arr.length; i++) {
if (max < arr[i]) {
max = arr[i];
maxIndex = i;
}
}
// this.items.pop(max) 只能删除数组中最后一位
this.items.splice(maxIndex, 1)
} else {
this.delMessageWarn()
}
},
insertRandom() {
var max = Math.max.apply(null, this.items);
const i = Math.round(Math.random() * this.items.length)
this.items.splice(i, 0, max + 1)
// this.items.splice(i, 0, id++)
},
shuffle() {
this.items = shuffle(this.items)
this.$message('已随机排序');
},
// 冒泡排序 两两比较待排序的关键字,并交换不满足次序要求的那对数,直到整个表都满足次序要求为止。
sort() {
// this.items.sort() 仅适用10位以内排序
let temp = 0; // 用来交换的临时数
// 要遍历的次数
for (let i = 0; i < this.items.length - 1; i++) {
// 从后向前依次的比较相邻两个数的大小,遍历一次后,把数组中第i小的数放在第i个位置上
for (let j = this.items.length - 1; j > i; j--) {
// 比较相邻的元素,如果前面的数大于后面的数,则交换
if (this.items[j - 1] > this.items[j]) {
temp = this.items[j - 1];
this.items[j - 1] = this.items[j];
this.items[j] = temp;
}
}
}
// 由于 JavaScript 的限制,Vue不能检测到对象属性的添加或删除
// $forceUpdate 适用于那些无法被 vue 监听到了 data 属性操作,比如对对象、数组的修改;
// 或者你可能依赖了一个未被 Vue 的响应式系统追踪的状态,比如某个 data 属性被 Object.freeze() 冻结了等等情况。
this.$forceUpdate();
this.$message({
message: '排序完成',
type: 'success'
});
},
reset() {
this.items = getInitialItems()
this.$message({
message: '已重置',
type: 'warning'
});
},
reverse() {
this.items.reverse()
this.$message('已颠倒顺序');
},
delMessageWarn() {
this.$message.error(this.delMessage);
return
}
}
}
</script>
<style>
.container {
width: 76.5%;
position: relative;
padding: 0;
}
.item {
width: auto;
padding-left: 10px;
height: 37px;
background-color: #f3f3f3;
border: 1px solid rgba(7, 166, 240, 0.624);
box-sizing: border-box;
}
/* 1. 声明过渡效果 */
.fade-move,
.fade-enter-active,
.fade-leave-active {
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
/* 2. 声明进入和离开的状态 */
.fade-enter-from,
.fade-leave-to {
opacity: 0;
transform: scaleY(0.01) translate(30px, 0);
}
/* 3. 确保离开的项目被移除出了布局流
以便正确地计算移动时的动画效果。 */
.fade-leave-active {
position: absolute;
}
el-button {
margin-right: 12px;
margin-top: 3px;
}
button {
margin-top: 6px;
}
</style>